Bereitstellen einer Next.js SSR-Anwendung für Amplify

Standardmäßig stellt Amplify neue SSR-Apps mithilfe des Compute-Service von Amplify Hosting bereit, der die Versionen 12 bis 15 von Next.js unterstützt. Amplify Hosting Compute verwaltet die Ressourcen, die für die Bereitstellung einer SSR-App erforderlich sind, vollständig. SSR-Apps in Ihrem Amplify-Konto, die Sie vor dem 17. November 2022 bereitgestellt haben, verwenden den klassischen SSR-Anbieter (nur Next.js 11).

Wir empfehlen dringend, Apps, die Classic (nur Next.js 11) SSR verwenden, zum Amplify Hosting Compute SSR-Anbieter zu migrieren. Amplify führt keine automatischen Migrationen für Sie durch. Sie müssen Ihre App manuell migrieren und dann einen neuen Build initiieren, um das Update abzuschließen. Detaillierte Anweisungen finden Sie unter Migrieren einer Next.js 11 SSR-App auf Amplify Hosting Compute.

Verwenden Sie die folgenden Anweisungen, um eine neue Next.js SSR-App bereitzustellen.

So stellen Sie mithilfe des Amplify Hosting-Compute-SSR-Anbieters eine SSR-App für Amplify bereit

1. Melden Sie sich bei der an AWS Management Console und öffnen Sie die Amplify-Konsole.

2. Wählen Sie auf der Seite „Alle Apps“ die Option Neue App erstellen aus.

3. Wählen Sie auf der Seite Start building with Amplify Ihren Git-Repository-Anbieter aus und klicken Sie dann auf Weiter.

4. Gehen Sie auf der Seite Repository-Zweig hinzufügen wie folgt vor:

   1. Wählen Sie in der Liste „Kürzlich aktualisierte Repositorys“ den Namen des Repositorys aus, mit dem Sie eine Verbindung herstellen möchten.

   2. Wählen Sie in der Branch-Liste den Namen des Repository-Branches aus, zu dem Sie eine Verbindung herstellen möchten.

   3. Wählen Sie Weiter.

5. Die App erfordert eine IAM-Servicerolle, die Amplify übernimmt, wenn es in Ihrem Namen andere Dienste anruft. Sie können entweder Amplify Hosting Compute erlauben, automatisch eine Servicerolle für Sie zu erstellen, oder Sie können eine Rolle angeben, die Sie erstellt haben.

   • Um Amplify zu ermöglichen, automatisch eine Rolle zu erstellen und sie an Ihre App anzuhängen:

     1. Wählen Sie Neue Servicerolle erstellen und verwenden aus.

   • Um eine Servicerolle anzuhängen, die Sie zuvor erstellt haben:

     1. Wählen Sie Bestehende Servicerolle verwenden aus.

     2. Wählen Sie die zu verwendende Rolle aus der Liste aus.

6. Wählen Sie Weiter.

7. Wählen Sie auf der Seite Überprüfen die Option Speichern und bereitstellen aus.

Einstellungen für die Datei package.json

Wenn Sie eine Next.js App bereitstellen, überprüft Amplify das Build-Skript der App in der package.json Datei, um den Anwendungstyp zu bestimmen.

Das Folgende ist ein Beispiel für das Build-Skript für eine Next.js App. Das Build-Skript "next build" gibt an, dass die App sowohl SSG- als auch SSR-Seiten unterstützt. Dieses Build-Skript wird auch für SSG-Apps von Next.js 14 oder höher verwendet.

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start"
},

Im Folgenden finden Sie ein Beispiel für das Build-Skript für eine SSG-App vom Typ Next.js 13 oder früher. Das Build-Skript "next build && next export" gibt an, dass die App nur SSG-Seiten unterstützt.

"scripts": {
  "dev": "next dev",
  "build": "next build && next export",
  "start": "next start"
},

Amplify Sie die Build-Einstellungen für eine Next.js SSR-Anwendung

Nach der Überprüfung der package.json Datei Ihrer App überprüft Amplify die Build-Einstellungen für die App. Sie können die Build-Einstellungen in der Amplify-Konsole oder in einer amplify.yml Datei im Stammverzeichnis Ihres Repositorys speichern. Weitere Informationen finden Sie unter Konfiguration der Build-Einstellungen für eine App.

Wenn Amplify feststellt, dass Sie eine Next.js SSR-App bereitstellen und keine amplify.yml Datei vorhanden ist, generiert es eine Buildspec für die App und setzt auf. baseDirectory .next Wenn Sie eine App bereitstellen, in der eine amplify.yml Datei vorhanden ist, überschreiben die Build-Einstellungen in der Datei alle Build-Einstellungen in der Konsole. Daher müssen Sie den Wert .next in der Datei manuell baseDirectory auf setzen.

Im Folgenden finden Sie ein Beispiel für die Build-Einstellungen für eine App, für die der Wert auf eingestellt baseDirectory ist.next. Dies weist darauf hin, dass die Build-Artefakte für eine Next.js -App bestimmt sind, die SSG- und SSR-Seiten unterstützt.

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: .next
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

Amplify Sie die Build-Einstellungen für eine SSG-Anwendung von Next.js 13 oder früher

Wenn Amplify feststellt, dass Sie eine SSG-App von Next.js 13 oder früher bereitstellen, generiert es eine Build-Spezifikation für die App und setzt baseDirectory sie auf. out Wenn Sie eine App bereitstellen, in der eine amplify.yml Datei vorhanden ist, müssen Sie den Wert out in der Datei manuell baseDirectory auf setzen. Das out Verzeichnis ist der Standardordner, den Next.js zum Speichern exportierter statischer Elemente erstellt. Wenn Sie die Build-Spezifikationseinstellungen Ihrer App konfigurieren, ändern Sie den Namen des baseDirectory Ordners so, dass er der Konfiguration Ihrer App entspricht.

Im Folgenden finden Sie ein Beispiel für die Build-Einstellungen für eine App, bei der auf festgelegt baseDirectory ist, out um anzuzeigen, dass die Build-Artefakte für eine App von Next.js 13 oder früher bestimmt sind, die nur SSG-Seiten unterstützt.

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: out
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

Amplify Sie die Build-Einstellungen für eine SSG-Anwendung von Next.js 14 oder höher

In Next.js Version 14 war der next export Befehl veraltet und wurde durch den Befehl output: 'export' in der next.config.js Datei ersetzt, um statische Exporte zu ermöglichen. Wenn Sie eine reine Next.js 14 SSG-Anwendung in der Konsole bereitstellen, generiert Amplify eine Buildspec für die App und setzt sie auf. baseDirectory .next Wenn Sie eine App bereitstellen, in der eine amplify.yml Datei vorhanden ist, müssen Sie das auf in der baseDirectory Datei manuell setzen. .next Dies ist dieselbe baseDirectory Einstellung, die Amplify für Next.js WEB_COMPUTE -Anwendungen verwendet, die sowohl SSG- als auch SSR-Seiten unterstützen.

Das Folgende ist ein Beispiel für die Build-Einstellungen für eine App nur Next.js 14 SSG mit der Einstellung auf. baseDirectory .next

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: .next
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*