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

Standardmäßig stellt Amplify neue SSR Apps mithilfe des Compute-Service von Amplify Hosting mit Unterstützung für Next.js 12, 13 und 14 bereit. Amplify Hosting Compute verwaltet die Ressourcen, die für die Bereitstellung einer SSR App erforderlich sind, vollständig. SSRApps in Ihrem Amplify-Konto, die Sie vor dem 17. November 2022 bereitgestellt haben, verwenden den SSR Classic-Anbieter (nur Next.js 11).

Wir empfehlen dringend, Apps mit Classic (nur Next.js 11) SSR zum Amplify SSR Hosting-Rechenanbieter 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 SSR 11-App auf Amplify Hosting Compute.

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

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

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

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

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.

   • Um eine zuvor erstellte Servicerolle anzuhängen:

     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 SSG sowohl als auch SSR Seiten unterstützt. Dieses Build-Skript wird auch SSG nur für 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 der Version 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 Anwendung SSR

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 SSR Seiten unterstütztSSG.

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 Anwendung von Next.js 13 oder früher SSG

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 sie baseDirectory aufout. 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 Next.js 14-Anwendung SSG

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 SSG reine Next.js 14-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 den Wert in der Datei manuell baseDirectory auf .next setzen. Dies ist dieselbe baseDirectory Einstellung, die Amplify für Next.js WEB_COMPUTE -Anwendungen verwendet, die SSG sowohl als auch SSR Seiten unterstützen.

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

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