Ajout de la fonctionnalité SSR à une application Next.js statique - 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.

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 les versions 12, 13 ou 14 de Next.js 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.

  2. Ajoutez un rôle de service à l'application.

  3. Mettez à jour le répertoire de sortie dans les paramètres de compilation de l'application.

  4. 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 plateforme 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 applicationWEB_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 AWS Identity and Access Management (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 et ouvrez-la.

  2. Si vous n'avez pas encore créé de rôle de service dans votre compte Amplify, consultez Ajouter un rôle de service pour terminer cette étape préalable.

  3. Choisissez l'application statique Next.js à laquelle vous souhaitez ajouter un rôle de service.

  4. Dans le volet de navigation, choisissez Paramètres de l'application, Général.

  5. Sur la page des détails de l'application, choisissez Modifier

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

  7. 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, veuillez consulter Configuration des paramètres de compilation.

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

Mettez à 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.