Les traductions sont fournies par des outils de traduction automatique. En cas de conflit entre le contenu d'une traduction et celui de la version originale en anglais, la version anglaise prévaudra.

# Déployez une Next.js application pour Amplify Hosting
<a name="getting-started-next"></a>

Ce didacticiel explique comment créer et déployer une Next.js application à partir d'un dépôt Git.

Avant de commencer ce didacticiel, remplissez les conditions préalables suivantes.

**Création d’une application**  
Créez une Next.js application de base à utiliser pour ce didacticiel, en suivant les [ instructions de ](https://nextjs.org/docs/app/api-reference/create-next-app) création d'une application suivante dans la documentation. * Next.js *

**Création d'un dépôt Git**  
Amplify prend GitHub en charge Bitbucket GitLab, et. AWS CodeCommit Transférez votre `create-next-app` application vers votre dépôt Git.

## Étape 1 : connecter un dépôt Git
<a name="step-1-connect-repository"></a>

Au cours de cette étape, vous connectez votre Next.js application dans un référentiel Git à Amplify Hosting.

**Pour connecter une application dans un référentiel Git**

1. Ouvrez la console [ Amplify. ](https://console.aws.amazon.com/amplify/)

1. Si vous déployez votre première application dans la région actuelle, vous partirez par défaut de la page de **AWS Amplify** service.

   Choisissez ** Déployer une application en ** haut de la page.

1. Sur la ** page ** Commencer à créer avec Amplify, choisissez votre fournisseur de référentiel Git, puis choisissez ** Next**.

   Pour les GitHub référentiels, Amplify utilise la fonction GitHub Apps pour autoriser l'accès à Amplify. Pour plus d'informations sur l'installation et l'autorisation de l' GitHubapplication, consultez[Configuration de l'accès d'Amplify aux référentiels GitHub](setting-up-GitHub-access.md).
**Note**  
Une fois que vous avez autorisé la console Amplify avec Bitbucket GitLab, ou AWS CodeCommit, Amplify récupère un jeton d'accès auprès du fournisseur du référentiel, mais * ne le stocke pas sur les serveurs. * AWS Amplify accède à votre référentiel à l'aide de clés de déploiement installées dans un référentiel spécifique.

1. Sur la ** page ** Ajouter une branche de référentiel, procédez comme suit :

   1. Sélectionnez le nom du référentiel auquel vous souhaitez vous connecter.

   1. Sélectionnez le nom de la branche du référentiel à connecter.

   1. Choisissez **Suivant**.

## Étape 2 : Confirmez les paramètres de compilation
<a name="step-2a-confirm-build-settings-for-the-front-end"></a>

Amplify détecte automatiquement la séquence de commandes de génération à exécuter pour la branche que vous déployez. Au cours de cette étape, vous vérifiez et confirmez vos paramètres de compilation.

**Pour confirmer les paramètres de création d'une application**

1. Sur la ** page des paramètres de ** l'application, recherchez la ** section Paramètres de ** création.

   Vérifiez que la commande ** Frontend build ** et le répertoire de sortie ** Build ** sont corrects. Pour cet Next.js exemple d'application, le répertoire de sortie ** Build ** est défini sur`.next`.

1. La procédure d'ajout d'un rôle de service varie selon que vous souhaitez créer un nouveau rôle ou utiliser un rôle existant.
   + Pour créer un nouveau rôle :

     1. Choisissez **Créer et utiliser un nouveau rôle de service**.
   + Pour utiliser un rôle existant, procédez comme suit :

     1. Choisissez ** Utiliser un rôle existant**.

     1. Dans la liste des rôles de service, sélectionnez le rôle à utiliser.

1. Choisissez **Suivant**.

## Étape 3 : déployer l'application
<a name="step-3-save-and-deploy"></a>

Au cours de cette étape, vous déployez votre application sur le réseau AWS mondial de diffusion de contenu (CDN).

**Pour enregistrer et déployer une application**

1. Sur la ** page ** Révision, vérifiez que les détails de votre référentiel et les paramètres de l'application sont corrects.

1. Choisissez **Save and deploy** (Enregistrer et déployer). La création de votre interface prend généralement 1 à 2 minutes, mais peut varier en fonction de la taille de l'application.

1. Une fois le déploiement terminé, vous pouvez consulter votre application à l'aide du lien vers le domaine `amplifyapp.com` par défaut.

**Note**  
Pour renforcer la sécurité de vos applications Amplify, le * domaine * amplifyapp.com est enregistré dans la liste des suffixes [ publics (PSL). ](https://publicsuffix.org/) Pour plus de sécurité, nous vous recommandons d'utiliser des cookies avec un `__Host-` préfixe si vous devez définir des cookies sensibles dans le nom de domaine par défaut de vos applications Amplify. Cette pratique vous aidera à protéger votre domaine contre les tentatives de falsification de requêtes intersites (CSRF). Pour plus d'informations, consultez la [ Set-Cookie ](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie#cookie_prefixes) page du Mozilla Developer Network.

## Étape 4 : nettoyage des ressources (facultatif)
<a name="step-4-clean-up"></a>

Si vous n'avez plus besoin de l'application que vous avez déployée pour le didacticiel, vous pouvez la supprimer. Cette étape permet de vous assurer de ne pas être facturé pour des ressources que vous n’utilisez pas.

**Pour supprimer une application**

1. Dans le ** menu des paramètres de l'**application du volet de navigation, choisissez Paramètres ** généraux**.

1. Sur la ** page des paramètres ** généraux, choisissez ** Supprimer l'application**.

1. Dans la fenêtre de confirmation, entrez**delete**. Choisissez ensuite ** Supprimer l'application**.

## Ajoutez des fonctionnalités à votre application
<a name="next-steps"></a>

Maintenant qu'une application est déployée sur Amplify, vous pouvez explorer certaines des fonctionnalités suivantes disponibles pour votre application hébergée.

**Variables d’environnement**  
Les applications ont souvent besoin d'informations de configuration lors de l'exécution. Ces configurations peuvent être des détails de connexion à la base de données, des clés d'API ou des paramètres. Les variables d'environnement permettent d'exposer ces configurations au moment de la génération. Pour plus d’informations, consultez la section [Variables d’environnement](environment-variables.md).

**Domaines personnalisés**  
Dans ce didacticiel, Amplify héberge votre application pour vous sur le `amplifyapp.com` domaine par défaut avec une URL telle que`https://branch-name.d1m7bkiki6tdw1.amplifyapp.com`. Lorsque vous connectez votre application à un domaine personnalisé, les utilisateurs voient que votre application est hébergée sur une URL personnalisée, telle que`https://www.example.com`. Pour plus d'informations, consultez la section [ Configuration de domaines personnalisés](custom-domains.md).

**Aperçus des Pull Request**  
Les aperçus des demandes d'extraction Web offrent aux équipes un moyen de prévisualiser les modifications apportées par les demandes d'extraction (PR) avant de fusionner le code dans une branche de production ou d'intégration. Pour plus d'informations, consultez la section [ Aperçus Web pour les pull requests](pr-previews.md).

**Gérer plusieurs environnements**  
Pour savoir comment Amplify fonctionne avec les branches de fonctionnalités et les GitFlow flux de travail pour prendre en charge plusieurs déploiements, voir Déploiements de branches de [ fonctionnalités et flux de travail d'équipe. ](multi-environments.md)