Déploiement d'une application Next.js avec Amplify - AWS Amplify Hébergement

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éploiement d'une application Next.js avec Amplify

Par défaut, Amplify déploie de nouvelles applications SSR à l'aide du service de calcul d'Amplify Hosting avec prise en charge de Next.js 12, 13 et 14. 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 vers Amplify Hosting Compute.

Suivez les instructions ci-dessous pour déployer une nouvelle application Next.js.

Pour déployer une application Next.js sur Amplify à l'aide du fournisseur de calcul SSR d'Amplify Hosting
  1. Connectez-vous à la console Amplify AWS Management Console et ouvrez-la.

  2. Sur la page Toutes les applications, choisissez Créer une nouvelle application.

  3. Sur la page Commencer à créer avec Amplify, choisissez votre fournisseur de dépôt Git, puis choisissez Next.

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

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

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

    3. Choisissez Suivant.

  5. 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 utilisez 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.

      2. Sélectionnez le rôle à utiliser dans la liste.

  6. Choisissez Suivant.

  7. 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étecter si l'application est SSR ou SSG.

Voici un exemple de script de génération pour une application SSR Next.js. Le script de compilation "next build" indique que l'application prend en charge les pages SSG et SSR.

"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. 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 construction

Après avoir inspecté le package.json fichier de votre application pour déterminer si vous déployez une application SSG ou SSR, 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 plus d’informations, consultez Configuration des paramètres de compilation.

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 contenant un amplify.yml fichier, 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/**/*

Si Amplify détecte que vous déployez une application SSG, il génère une spécification de construction 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.

Voici un exemple des paramètres de génération d'une application où le paramètre baseDirectory est défini surout. Cela indique que les artefacts de construction sont destinés à une application Next.js 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/**/*