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
<a name="redeploy-ssg-to-ssr"></a>

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
<a name="update-platform"></a>

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
<a name="add-service-role"></a>

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
<a name="update-build-settings"></a>

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
<a name="update-package.json-file"></a>

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.