Bereitstellen einer Next.js App mit Amplify - AWS Amplify Hosten

Die vorliegende Übersetzung wurde maschinell erstellt. Im Falle eines Konflikts oder eines Widerspruchs zwischen dieser übersetzten Fassung und der englischen Fassung (einschließlich infolge von Verzögerungen bei der Übersetzung) ist die englische Fassung maßgeblich.

Bereitstellen einer Next.js App mit 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. 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 mit Classic (nur Next.js 11) SSR 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. Anweisungen finden Sie unter Migrieren einer Next.js 11-App auf Amplify Hosting Compute.

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

So stellen Sie mithilfe des Amplify Hosting-Compute-SSR-Anbieters eine Next.js 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 den Namen des Repositorys aus, zu dem Sie eine Verbindung herstellen möchten.

    2. Wählen Sie den Namen des Repository-Zweigs aus, zu dem eine Verbindung hergestellt werden soll.

    3. Wählen Sie Weiter aus.

  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 aus.

  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 festzustellen, ob es sich bei der App um SSR oder SSG handelt.

Das Folgende ist ein Beispiel für das Build-Skript für eine Next.js SSR-App. Das Build-Skript "next build" gibt an, dass die App sowohl SSG- als auch SSR-Seiten unterstützt.

"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 von Next.js. 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" },

Build-Einstellungen Amplify

Nachdem Sie die package.json Datei Ihrer App überprüft haben, um festzustellen, ob Sie eine SSG- oder SSR-App bereitstellen, ü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 Build-Einstellungen konfigurieren.

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/**/*

Wenn Amplify feststellt, dass Sie eine SSG-App bereitstellen, generiert es eine Buildspec für die App und setzt sie auf. baseDirectory out Wenn Sie eine App bereitstellen, in der eine amplify.yml Datei vorhanden ist, müssen Sie den Wert in der baseDirectory Datei manuell auf setzen. out

Im Folgenden finden Sie ein Beispiel für die Build-Einstellungen für eine App, bei der der Wert auf gesetzt baseDirectory istout. Dies weist darauf hin, dass die Build-Artefakte für eine Next.js -App 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/**/*