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. # Amplify le support pour Next.js Amplify prend en charge le déploiement et l'hébergement d'applications Web rendues côté serveur (SSR) créées à l'aide de Next.js. Next.js est un framework React pour développer SPAs avec JavaScript. Vous pouvez déployer des applications créées avec des versions de Next.js jusqu'à Next.js 15, avec des fonctionnalités telles que l'optimisation des images et le middleware. Les développeurs peuvent utiliser Next.js pour combiner la génération de sites statiques (SSG) et le SSR dans un seul projet. Les pages SSG sont prérendues au moment de la création, et les pages SSR sont prérendues au moment de la demande. Le prérendu peut améliorer les performances et l'optimisation des moteurs de recherche. Comme Next.js préaffiche toutes les pages du serveur, le contenu HTML de chaque page est prêt lorsqu'il atteint le navigateur du client. Ce contenu peut également être chargé plus rapidement. Des temps de chargement plus rapides améliorent l'expérience de l'utilisateur final avec un site Web et ont un impact positif sur le classement SEO du site. Le pré-rendu améliore également le référencement en permettant aux robots des moteurs de recherche de trouver et d'explorer facilement le contenu HTML d'un site Web. Next.js fournit un support analytique intégré pour mesurer divers indicateurs de performance, tels que le délai jusqu'au premier octet (TTFB) et le premier contenu de peinture (FCP). Pour plus d'informations sur Next.js, consultez [Getting started](https://nextjs.org/docs/getting-started) on the Next.js website. ## Support des fonctionnalités de Next.js Amplify Hosting Compute gère entièrement le rendu côté serveur (SSR) pour les applications créées avec les versions 12 à 15 de Next.js. Si vous avez déployé une application Next.js sur Amplify avant la sortie d'Amplify Hosting Compute en novembre 2022, votre application utilise l'ancien fournisseur SSR d'Amplify, Classic (Next.js 11 uniquement). Amplify Hosting Compute ne prend pas en charge les applications créées à l'aide de Next.js version 11 ou antérieure. Nous vous recommandons vivement de migrer vos applications Next.js 11 vers le fournisseur SSR géré par le calcul Amplify Hosting. La liste suivante décrit les fonctionnalités spécifiques prises en charge par le fournisseur de SSR de calcul Amplify Hosting. **Fonctionnalités prises en charge** + Pages rendues côté serveur (SSR) + Pages statiques + Routes d'API + Routes dynamiques + Suivez tous les itinéraires + SSG (génération statique) + Régénération statique incrémentielle (ISR) + Routage de sous-chemins internationalisé (i18n) + Routage de domaine internationalisé (i18n) + Détection automatique des paramètres régionaux internationalisée (i18n) + Intergiciel + Variables d’environnement + Optimisation de l'image + Répertoire de l'application Next.js 13 **Fonctions non prises en charge** + Routes d'API Edge (le *middleware Edge n'est pas* pris en charge) + Régénération statique incrémentielle (ISR) à la *demande* + Diffusion de Next.js + Exécution d'un intergiciel sur des actifs statiques et des images optimisées + Exécution de code après une réponse avec `unstable_after` (fonctionnalité expérimentale publiée avec Next.js 15) ### Images du fichier Next.js La taille de sortie maximale d'une image ne doit pas dépasser 4,3 Mo. Vous pouvez stocker un fichier image plus volumineux quelque part et utiliser le composant Image Next.js pour le redimensionner et l'optimiser au format Webp ou AVIF, puis l'utiliser dans une taille plus petite. Notez que la documentation Next.js vous conseille d'installer le module de traitement d'image Sharp pour permettre à l'optimisation des images de fonctionner correctement en production. Toutefois, cela n'est pas nécessaire pour les déploiements d'Amplify. Amplify déploie automatiquement Sharp pour vous. # Déploiement d'une application SSR Next.js sur Amplify Par défaut, Amplify déploie de nouvelles applications SSR à l'aide du service de calcul d'Amplify Hosting avec prise en charge des versions 12 à 15 de Next.js. Amplify Hosting Compute gère entièrement les ressources nécessaires au déploiement d'une application SSR. Les applications SSR de votre compte Amplify que vous avez déployées avant le 17 novembre 2022 utilisent le fournisseur SSR Classic (Next.js 11 uniquement). Nous vous recommandons vivement de migrer les applications utilisant le SSR classique (Next.js 11 uniquement) vers le fournisseur de SSR de calcul Amplify Hosting. Amplify n'effectue pas de migrations automatiques pour vous. Vous devez migrer manuellement votre application, puis lancer une nouvelle version pour terminer la mise à jour. Pour obtenir des instructions, veuillez consulter [Migration d'une application Next.js 11 SSR vers Amplify Hosting Compute](update-app-nextjs-version.md). Suivez les instructions ci-dessous pour déployer une nouvelle application Next.js SSR. **Pour déployer une application SSR sur Amplify à l'aide du fournisseur de calcul SSR d'Amplify Hosting** 1. Connectez-vous à la console [Amplify AWS Management Console](https://console.aws.amazon.com/amplify/) et ouvrez-la. 1. Sur la page **Toutes les applications**, choisissez **Créer une nouvelle application**. 1. **Sur la page **Commencer à créer avec Amplify**, choisissez votre fournisseur de dépôt Git, puis choisissez Next.** 1. Sur la page **Ajouter une branche de référentiel**, procédez comme suit : 1. Dans la liste des **référentiels récemment mis à jour**, sélectionnez le nom du référentiel à connecter. 1. Dans la liste **Branche**, sélectionnez le nom de la branche du référentiel à connecter. 1. Choisissez **Suivant**. 1. L'application nécessite un rôle de service IAM qu'Amplify assume lorsqu'il appelle d'autres services en votre nom. Vous pouvez soit autoriser le calcul d'Amplify Hosting à créer automatiquement un rôle de service pour vous, soit spécifier un rôle que vous avez créé. + Pour permettre à Amplify de créer automatiquement un rôle et de l'associer à votre application : 1. Choisissez **Créer et utiliser un nouveau rôle de service**. + Pour associer un rôle de service que vous avez créé précédemment : 1. Choisissez **Utiliser un rôle de service existant**. 1. Sélectionnez le rôle à utiliser dans la liste. 1. Choisissez **Suivant**. 1. Sur la page **Révision**, choisissez **Enregistrer et déployer**. ## Paramètres du fichier Package.json Lorsque vous déployez une application Next.js, Amplify inspecte le script de génération de l'application dans le `package.json` fichier pour déterminer le type d'application. Voici un exemple de script de génération pour une application Next.js. Le script de compilation `"next build"` indique que l'application prend en charge les pages SSG et SSR. Ce script de génération est également utilisé pour les applications SSG de Next.js 14 ou version ultérieure uniquement. ``` "scripts": { "dev": "next dev", "build": "next build", "start": "next start" }, ``` Voici un exemple de script de génération pour une application SSG Next.js 13 ou antérieure. Le script de génération `"next build && next export"` indique que l'application ne prend en charge que les pages SSG. ``` "scripts": { "dev": "next dev", "build": "next build && next export", "start": "next start" }, ``` ## Amplifier les paramètres de compilation pour une application Next.js SSR Après avoir inspecté le `package.json` fichier de votre application, Amplify vérifie les paramètres de compilation de l'application. Vous pouvez enregistrer les paramètres de compilation dans la console Amplify ou dans un `amplify.yml` fichier à la racine de votre référentiel. Pour de plus amples informations, veuillez consulter [Configuration des paramètres de compilation pour une application Amplify](build-settings.md). Si Amplify détecte que vous déployez une application SSR Next.js et qu'aucun `amplify.yml` fichier n'est présent, il génère une spécification de construction pour l'application et la définit sur. `baseDirectory` `.next` Si vous déployez une application dans laquelle un `amplify.yml` fichier est présent, les paramètres de génération du fichier remplacent ceux de la console. Par conséquent, vous devez définir manuellement le `baseDirectory` to `.next` dans le fichier. Voici un exemple des paramètres de génération d'une application où le paramètre `baseDirectory` est défini sur`.next`. Cela indique que les artefacts de construction sont destinés à une application Next.js qui prend en charge les pages SSG et SSR. ``` version: 1 frontend: phases: preBuild: commands: - npm ci build: commands: - npm run build artifacts: baseDirectory: .next files: - '**/*' cache: paths: - node_modules/**/* ``` ## Amplifier les paramètres de compilation pour une application SSG Next.js 13 ou antérieure Si Amplify détecte que vous déployez une application SSG Next.js 13 ou antérieure, il génère une spécification de build pour l'application et la définit sur. `baseDirectory` `out` Si vous déployez une application dans laquelle un `amplify.yml` fichier est présent, vous devez définir manuellement le `baseDirectory` to `out` dans le fichier. Le `out` répertoire est le dossier par défaut créé par Next.js pour stocker les actifs statiques exportés. Lorsque vous configurez les paramètres de spécification de build de votre application, modifiez le nom du `baseDirectory` dossier pour qu'il corresponde à la configuration de votre application. Voici un exemple des paramètres de génération d'une application où il `baseDirectory` est défini `out` pour indiquer que les artefacts de génération concernent une application Next.js 13 ou antérieure qui ne prend en charge que les pages SSG. ``` version: 1 frontend: phases: preBuild: commands: - npm ci build: commands: - npm run build artifacts: baseDirectory: out files: - '**/*' cache: paths: - node_modules/**/* ``` ## Amplifier les paramètres de compilation pour une application SSG Next.js 14 ou version ultérieure Dans la version 14 de Next.js, la `next export` commande était obsolète et remplacée par `output: 'export'` dans le `next.config.js` fichier pour activer les exportations statiques. Si vous déployez une application Next.js 14 SSG uniquement dans la console, Amplify génère une spécification de construction pour l'application et la définit sur. `baseDirectory` `.next` Si vous déployez une application dans laquelle un `amplify.yml` fichier est présent, vous devez définir manuellement le `baseDirectory` to `.next` dans le fichier. Il s'agit du même `baseDirectory` paramètre qu'Amplify utilise pour les `WEB_COMPUTE` applications Next.js qui prennent en charge les pages SSG et SSR. Voici un exemple des paramètres de génération pour une application Next.js 14 SSG uniquement avec le paramètre `baseDirectory` défini sur. `.next` ``` version: 1 frontend: phases: preBuild: commands: - npm ci build: commands: - npm run build artifacts: baseDirectory: .next files: - '**/*' cache: paths: - node_modules/**/* ``` # Migration d'une application Next.js 11 SSR vers Amplify Hosting Compute Lorsque vous déployez une nouvelle application Next.js, Amplify utilise par défaut la dernière version prise en charge de Next.js. Actuellement, le fournisseur de SSR de calcul Amplify Hosting prend en charge la version 15 de Next.js. La console Amplify détecte les applications de votre compte qui ont été déployées avant la sortie de novembre 2022 du service de calcul Amplify Hosting avec prise en charge complète des versions 12 à 15 de Next.js. La console affiche une bannière d'information identifiant les applications dotées de branches déployées à l'aide de l'ancien fournisseur SSR d'Amplify, Classic (Next.js 11 uniquement). Nous vous recommandons vivement de migrer vos applications vers le fournisseur de calcul SSR d'Amplify Hosting. Si vous mettez à jour votre application hébergée Next.js 11 vers Next.js 12 ou version ultérieure, un `"target" property is no longer supported` message d'erreur peut s'afficher lorsqu'un déploiement est déclenché. Dans ce cas, vous devez migrer vers Amplify Hosting Compute. Vous devez migrer manuellement l'application et toutes ses branches de production en même temps. Une application ne peut pas contenir à la fois des branches Classic (Next.js 11 uniquement) et Next.js 12 ou version ultérieure. Suivez les instructions suivantes pour migrer une application vers le fournisseur de calcul SSR d'Amplify Hosting. **Pour migrer une application vers le fournisseur de calcul SSR d'Amplify Hosting** 1. Connectez-vous à la console [Amplify AWS Management Console](https://console.aws.amazon.com/amplify/) et ouvrez-la. 1. Choisissez l'application Next.js que vous souhaitez migrer. **Note** Avant de migrer une application dans la console Amplify, vous devez d'abord mettre à jour le fichier package.json de l'application pour utiliser Next.js version 12 ou ultérieure. 1. Dans le volet de navigation, choisissez **Paramètres de l'application**, **Général**. 1. Sur la page d'accueil de l'application, la console affiche une bannière si l'application possède des branches déployées à l'aide du **fournisseur SSR** *Classic (Next.js 11 uniquement)*. Sur la bannière, choisissez **Migrer**. 1. Dans la fenêtre de confirmation de la migration, sélectionnez les trois instructions et choisissez **Migrer**. 1. Amplify créera et redéploiera votre application pour terminer la migration. ## Annulation d'une migration SSR Lorsque vous déployez une application Next.js, Amplify Hosting détecte les paramètres de votre application et définit la valeur de plate-forme interne de l'application. Il existe trois valeurs de plateforme valides. Une application SSG est définie sur la valeur `WEB` de la plateforme. Une application SSR utilisant Next.js version 11 est définie sur la valeur `WEB_DYNAMIC` de la plateforme. Une application SSR de Next.js 12 ou version ultérieure est définie sur la valeur `WEB_COMPUTE` de la plateforme. Lorsque vous migrez une application en suivant les instructions de la section précédente, Amplify change la valeur de plateforme de votre application de à`WEB_DYNAMIC`. `WEB_COMPUTE` Une fois la migration vers Amplify Hosting terminée, vous ne pouvez pas annuler la migration dans la console. Pour annuler la migration, vous devez utiliser le AWS Command Line Interface pour redéfinir la plateforme de l'application. `WEB_DYNAMIC` Ouvrez une fenêtre de terminal et entrez la commande suivante pour mettre à jour l'ID de l'application et la région avec vos informations uniques. ``` aws amplify update-app --app-id abcd1234 --platform WEB_DYNAMIC --region us-west-2 ``` # Ajout de la fonctionnalité SSR à une application Next.js statique Vous pouvez ajouter la fonctionnalité SSR à une application statique (SSG) Next.js existante déployée avec Amplify. Avant de commencer le processus de conversion de votre application SSG en SSR, mettez-la à jour pour utiliser Next.js version 12 ou ultérieure et ajoutez la fonctionnalité SSR. Ensuite, vous devrez effectuer les étapes suivantes. 1. Utilisez le AWS Command Line Interface pour modifier le type de plateforme de l'application. 1. Ajoutez un rôle de service à l'application. 1. Mettez à jour le répertoire de sortie dans les paramètres de compilation de l'application. 1. Mettez à jour le `package.json` fichier de l'application pour indiquer que celle-ci utilise le SSR. ## Mettre à jour la plateforme Il existe trois valeurs valides pour le type de plateforme. Une application SSG est définie sur le type `WEB` de plateforme. Une application SSR utilisant Next.js version 11 est définie sur le type `WEB_DYNAMIC` de plate-forme. Pour les applications déployées sur Next.js 12 ou version ultérieure à l'aide du SSR géré par Amplify Hosting Compute, le type de plate-forme est défini sur. `WEB_COMPUTE` Lorsque vous avez déployé votre application en tant qu'application SSG, Amplify a défini le type de plateforme sur. `WEB` Utilisez le AWS CLI pour modifier la plateforme de votre application`WEB_COMPUTE`. Ouvrez une fenêtre de terminal et entrez la commande suivante, en mettant à jour le texte en rouge avec votre identifiant d'application unique et votre région. ``` aws amplify update-app --app-id abcd1234 --platform WEB_COMPUTE --region us-west-2 ``` ## Ajouter un rôle de service Un rôle de service est le rôle Gestion des identités et des accès AWS (IAM) qu'Amplify assume lorsqu'il appelle d'autres services en votre nom. Suivez ces étapes pour ajouter un rôle de service à une application SSG déjà déployée avec Amplify. **Pour ajouter un rôle de service** 1. Connectez-vous à la console [Amplify AWS Management Console](https://console.aws.amazon.com/amplify/) et ouvrez-la. 1. Si vous n'avez pas encore créé de rôle de service dans votre compte Amplify, consultez [Ajouter un rôle de service](amplify-service-role.md) pour terminer cette étape préalable. 1. Choisissez l'application statique Next.js à laquelle vous souhaitez ajouter un rôle de service. 1. Dans le volet de navigation, choisissez **Paramètres de l'application**, **Général**. 1. Sur la page des **détails de l'application**, choisissez **Modifier** 1. Pour **Rôle de service**, choisissez le nom d'un rôle de service existant ou le nom du rôle de service que vous avez créé à l'étape 2. 1. Choisissez **Enregistrer**. ## Mettre à jour les paramètres de compilation Avant de redéployer votre application avec la fonctionnalité SSR, vous devez mettre à jour les paramètres de compilation de l'application afin de définir le répertoire de sortie sur. `.next` Vous pouvez modifier les paramètres de compilation dans la console Amplify ou dans un `amplify.yml` fichier stocké dans votre dépôt. Pour plus d'informations, voir,[Configuration des paramètres de compilation pour une application Amplify](build-settings.md). Voici un exemple des paramètres de génération d'une application où le paramètre `baseDirectory` est défini sur`.next`. ``` version: 1 frontend: phases: preBuild: commands: - npm ci build: commands: - npm run build artifacts: baseDirectory: .next files: - '**/*' cache: paths: - node_modules/**/* ``` ## Mettre à jour le fichier package.json Après avoir ajouté un rôle de service et mis à jour les paramètres de compilation, mettez à jour le `package.json` fichier de l'application. Comme dans l'exemple suivant, définissez le script de génération sur `"next build"` pour indiquer que l'application Next.js prend en charge les pages SSG et SSR. ``` "scripts": { "dev": "next dev", "build": "next build", "start": "next start" }, ``` Amplify détecte la modification du `package.json` fichier dans votre dépôt et redéploie l'application avec la fonctionnalité SSR. # Rendre les variables d'environnement accessibles aux environnements d'exécution côté serveur Amplify Hosting prend en charge l'ajout de variables d'environnement aux versions de votre application en les définissant dans la configuration du projet dans la console Amplify. Cependant, un composant serveur Next.js n'a pas accès à ces variables d'environnement par défaut. Ce comportement est intentionnel pour protéger les secrets stockés dans les variables d'environnement que votre application utilise pendant la phase de génération. Pour rendre des variables d'environnement spécifiques accessibles à Next.js, vous pouvez modifier le fichier de spécification de build Amplify afin de les définir dans les fichiers d'environnement reconnus par Next.js. Cela permet à Amplify de charger ces variables d'environnement avant de créer l'application. **Important** Nous vous recommandons vivement de ne pas stocker d'informations d'identification, de secrets ou d'informations sensibles dans vos variables d'environnement, car tout utilisateur ayant accès aux artefacts de déploiement peut les lire. Pour permettre à votre fonction de calcul SSR d'accéder aux AWS ressources, nous vous recommandons d'[utiliser des rôles IAM](amplify-SSR-compute-role.md). L'exemple de spécification de construction suivant montre comment ajouter des variables d'environnement dans la section des commandes de construction. ``` version: 1 frontend: phases: preBuild: commands: - npm ci build: commands: - env | grep -e API_BASE_URL >> .env.production - env | grep -e NEXT_PUBLIC_ >> .env.production - npm run build artifacts: baseDirectory: .next files: - '**/*' cache: paths: - node_modules/**/* - .next/cache/**/* ``` Dans cet exemple, la section des commandes de génération inclut deux commandes qui écrivent des variables d'environnement dans le `.env.production` fichier avant l'exécution de la compilation de l'application. Amplify Hosting permet à votre application d'accéder à ces variables lorsque l'application reçoit du trafic. La ligne suivante, tirée de la section des commandes de génération de l'exemple précédent, montre comment prendre une variable spécifique de l'environnement de génération et l'ajouter au `.env.production` fichier. ``` - env | grep -e API_BASE_URL -e APP_ENV >> .env.production ``` Si les variables existent dans votre environnement de génération, le `.env.production` fichier contiendra les variables d'environnement suivantes. ``` API_BASE_URL=localhost APP_ENV=dev ``` La ligne suivante, tirée de la section des commandes de construction de l'exemple précédent, montre comment ajouter une variable d'environnement avec un préfixe spécifique au `.env.production` fichier. Dans cet exemple, toutes les variables avec le préfixe `NEXT_PUBLIC_` sont ajoutées. ``` - env | grep -e NEXT_PUBLIC_ >> .env.production ``` Si plusieurs variables avec le `NEXT_PUBLIC_` préfixe existent dans l'environnement de construction, le `.env.production` fichier ressemblera à ce qui suit. ``` NEXT_PUBLIC_ANALYTICS_ID=abcdefghijk NEXT_PUBLIC_GRAPHQL_ENDPOINT=uowelalsmlsadf NEXT_PUBLIC_FEATURE_FLAG=true ``` ## Variables d'environnement SSR pour monorepos Si vous déployez une application SSR dans un monorepo et que vous souhaitez rendre des variables d'environnement spécifiques accessibles à Next.js, vous devez préfixer le `.env.production` fichier avec la racine de votre application. L'exemple de spécification de construction suivant pour une application Next.js dans un monorepo Nx montre comment ajouter des variables d'environnement dans la section des commandes de génération. ``` version: 1 applications: - frontend: phases: preBuild: commands: - npm ci build: commands: - env | grep -e API_BASE_URL -e APP_ENV >> apps/app/.env.production - env | grep -e NEXT_PUBLIC_ >> apps/app/.env.production - npx nx build app artifacts: baseDirectory: dist/apps/app/.next files: - '**/*' cache: paths: - node_modules/**/* buildPath: / appRoot: apps/app ``` Les lignes suivantes de la section des commandes de génération de l'exemple précédent montrent comment prendre des variables spécifiques de l'environnement de génération et les ajouter au `.env.production` fichier d'une application dans un monorepo avec la racine de l'application. `apps/app` ``` - env | grep -e API_BASE_URL -e APP_ENV >> apps/app/.env.production - env | grep -e NEXT_PUBLIC_ >> apps/app/.env.production ``` # Déploiement d'une application Next.js dans un monorepo Amplify prend en charge les applications en monorepos génériques ainsi que les applications en monorepos créées à l'aide de npm workspace, pnpm workspace, Yarn workspace, Nx et Turborepo. Lorsque vous déployez votre application, Amplify détecte automatiquement le framework de construction monorepo que vous utilisez. Amplify applique automatiquement les paramètres de génération pour les applications dans un espace de travail npm, un espace de travail Yarn ou Nx. Les applications Turborepo et pnpm nécessitent une configuration supplémentaire. Pour de plus amples informations, veuillez consulter [Configuration des paramètres de compilation de monorepo](monorepo-configuration.md). Pour un exemple détaillé de Nx, consultez le billet de [blog Share code between Next.js apps with Nx on AWS Amplify Hosting](https://aws.amazon.com/blogs/mobile/share-code-between-next-js-apps-with-nx-on-aws-amplify-hosting/).