

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.

# Stellen Sie eine Next.js App für Amplify Hosting bereit
<a name="getting-started-next"></a>

Dieses Tutorial führt Sie durch das Erstellen und Bereitstellen einer Next.js -Anwendung aus einem Git-Repository.

Bevor Sie mit diesem Tutorial beginnen, müssen Sie die folgenden Voraussetzungen erfüllen.

**Melden Sie sich an für eine AWS-Konto**  
Wenn Sie noch kein AWS Kunde sind, müssen Sie [einen erstellen](https://portal.aws.amazon.com/billing/signup#/start/email), AWS-Konto indem Sie den Online-Anweisungen folgen. Durch die Registrierung können Sie auf Amplify und andere AWS Dienste zugreifen, die Sie mit Ihrer Anwendung verwenden können.

**Erstellen einer Anwendung**  
Erstellen Sie anhand der [create-next-app](https://nextjs.org/docs/app/api-reference/create-next-app)Anweisungen in der *Dokumentation zu Next.js* eine grundlegende Anwendung Next.js, die Sie für dieses Tutorial verwenden können.

**Erstellen Sie ein Git-Repository**  
Amplify unterstützt GitHub, Bitbucket GitLab, und. AWS CodeCommit Schieben Sie Ihre `create-next-app` Anwendung in Ihr Git-Repository.

## Schritt 1: Ein Git-Repository Connect
<a name="step-1-connect-repository"></a>

In diesem Schritt verbinden Sie Ihre Anwendung Next.js in einem Git-Repository mit Amplify Hosting.

**Um eine App in einem Git-Repository zu verbinden**

1. Öffnen Sie die [Amplify-Konsole](https://console.aws.amazon.com/amplify/).

1. Wenn Sie Ihre erste App in der aktuellen Region bereitstellen, beginnen Sie standardmäßig auf der **AWS Amplify**Serviceseite.

   Wählen Sie oben auf der Seite die Option **App bereitstellen** aus.

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

   Für GitHub Repositorys verwendet Amplify die GitHub Apps-Funktion, um den Amplify-Zugriff zu autorisieren. Weitere Informationen zur Installation und Autorisierung der App finden Sie unter. GitHub [Amplify-Zugriff auf Repositorys einrichten GitHub](setting-up-GitHub-access.md)
**Anmerkung**  
Nachdem Sie die Amplify-Konsole mit Bitbucket,, oder AWS CodeCommit autorisiert haben GitLab, ruft Amplify ein Zugriffstoken vom Repository-Anbieter ab, *speichert das Token jedoch nicht auf den Servern*. AWS Amplify greift auf Ihr Repository nur mit Bereitstellungsschlüsseln zu, die in einem bestimmten Repository installiert sind.

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

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

   1. Wählen Sie **Weiter** aus.

## Schritt 2: Bestätigen Sie die Build-Einstellungen
<a name="step-2a-confirm-build-settings-for-the-front-end"></a>

Amplify erkennt automatisch die Reihenfolge der Build-Befehle, die für den Zweig ausgeführt werden sollen, den Sie bereitstellen. In diesem Schritt überprüfen und bestätigen Sie Ihre Build-Einstellungen.

**Um die Build-Einstellungen für eine App zu bestätigen**

1. Suchen Sie auf der Seite mit den **App-Einstellungen** den Abschnitt **Build-Einstellungen**.

   Stellen Sie sicher, dass der **Frontend-Build-Befehl** und das **Build-Ausgabeverzeichnis** korrekt sind. Für diese Beispiel-App Next.js ist das **Build-Ausgabeverzeichnis** auf `.next` eingestellt.

1. Das Verfahren zum Hinzufügen einer Servicerolle hängt davon ab, ob Sie eine neue Rolle erstellen oder eine vorhandene verwenden möchten.
   + Um eine neue Rolle zu erstellen:

     1. Wählen Sie **Neue Servicerolle erstellen und verwenden** aus.
   + Um eine bestehende Rolle zu verwenden:

     1. Wählen Sie **Eine bestehende Rolle verwenden** aus.

     1. Wählen Sie in der Liste der Servicerollen die zu verwendende Rolle aus.

1. Wählen Sie **Weiter** aus.

## Schritt 3: Stellen Sie die Anwendung bereit
<a name="step-3-save-and-deploy"></a>

In diesem Schritt stellen Sie Ihre App im AWS globalen Content Delivery Network (CDN) bereit.

**Um eine App zu speichern und bereitzustellen**

1. **Vergewissern Sie sich auf der Seite „Überprüfen“, dass Ihre Repository-Details und App-Einstellungen korrekt sind.**

1. Wählen Sie **Save and deploy (Speichern und Bereitstellen)** aus. Ihr Frontend-Build dauert in der Regel 1 bis 2 Minuten, kann aber je nach Größe der App variieren.

1. Wenn die Bereitstellung abgeschlossen ist, können Sie Ihre App über den Link zur `amplifyapp.com` Standarddomäne anzeigen.

**Anmerkung**  
Um die Sicherheit Ihrer Amplify-Anwendungen zu erhöhen, ist die Domain *amplifyapp.com* in der [Public Suffix](https://publicsuffix.org/) List (PSL) registriert. Aus Sicherheitsgründen empfehlen wir Ihnen, Cookies mit einem `__Host-` Präfix zu verwenden, falls Sie jemals sensible Cookies im Standard-Domainnamen für Ihre Amplify-Anwendungen einrichten müssen. Diese Vorgehensweise trägt dazu bei, Ihre Domain vor CSRF-Versuchen (Cross-Site Request Forgery Attempts, Anforderungsfälschung zwischen Websites) zu schützen. Weitere Informationen finden Sie auf der [Set-Cookie](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie#cookie_prefixes)-Seite im Mozilla Developer Network.

## Schritt 4: (Optional) Ressourcen bereinigen
<a name="step-4-clean-up"></a>

Wenn Sie die App, die Sie für das Tutorial bereitgestellt haben, nicht mehr benötigen, können Sie sie löschen. Mit diesem Schritt wird sichergestellt, dass Ihnen keine Ressourcen in Rechnung gestellt werden, die Sie nicht nutzen.

**Um eine App zu löschen**

1. Wählen Sie im Navigationsbereich im Menü **App-Einstellungen** die Option **Allgemeine Einstellungen** aus.

1. Wählen Sie auf der Seite **Allgemeine Einstellungen die** Option **App löschen** aus.

1. Geben Sie im Bestätigungsfenster ein**delete**. Wählen Sie dann **App löschen**.

## Füge Funktionen zu deiner App hinzu
<a name="next-steps"></a>

Nachdem Sie eine App für Amplify bereitgestellt haben, können Sie einige der folgenden Funktionen erkunden, die für Ihre gehostete Anwendung verfügbar sind.

**Umgebungsvariablen**  
Anwendungen benötigen zur Laufzeit häufig Konfigurationsinformationen. Bei diesen Konfigurationen kann es sich um Datenbankverbindungsdetails, API-Schlüssel oder Parameter handeln. Umgebungsvariablen bieten eine Möglichkeit, diese Konfigurationen während der Erstellung verfügbar zu machen. Weitere Informationen finden Sie unter [Umgebungsvariablen](environment-variables.md).

**Benutzerdefinierte Domänen**  
In diesem Tutorial hostet Amplify Ihre App für Sie auf der `amplifyapp.com` Standarddomain mit einer URL wie`https://branch-name.d1m7bkiki6tdw1.amplifyapp.com`. Wenn Sie Ihre App mit einer benutzerdefinierten Domain verbinden, sehen Benutzer, dass Ihre App auf einer benutzerdefinierten URL gehostet wird, z. `https://www.example.com` Weitere Informationen finden Sie unter [Benutzerdefinierte Domains einrichten](custom-domains.md).

**Vorschauen von Pull-Requests**  
Web-Pull-Request-Vorschauen bieten Teams die Möglichkeit, eine Vorschau der Änderungen an Pull-Requests (PRs) anzuzeigen, bevor sie den Code mit einem Produktions- oder Integrationszweig zusammenführen. Weitere Informationen finden Sie unter [Webvorschauen für](pr-previews.md) Pull-Requests.

**Verwalten mehrerer Umgebungen**  
Um zu erfahren, wie Amplify mit Feature Branches und GitFlow Workflows arbeitet, um mehrere Bereitstellungen zu unterstützen, siehe [Feature Branch-Bereitstellungen und](multi-environments.md) Team-Workflows.