Le traduzioni sono generate tramite traduzione automatica. In caso di conflitto tra il contenuto di una traduzione e la versione originale in Inglese, quest'ultima prevarrà.

# Aggiungere la funzionalità SSR a un'app Next.js statica
<a name="redeploy-ssg-to-ssr"></a>

È possibile aggiungere funzionalità SSR a un'app Next.js statica (SSG) esistente distribuita con Amplify. Prima di iniziare il processo di conversione dell'app SSG in SSR, aggiorna l'app per utilizzare Next.js versione 12 o successiva e aggiungi la funzionalità SSR. Quindi dovrai eseguire i seguenti passaggi.

1. Usa il AWS Command Line Interface per cambiare il tipo di piattaforma dell'app.

1. Aggiungi un ruolo di servizio all'app.

1. Aggiorna la directory di output nelle impostazioni di build dell'app.

1. Aggiorna il `package.json` file dell'app per indicare che l'app utilizza SSR.

## Aggiornamento della piattaforma
<a name="update-platform"></a>

Esistono tre valori validi per il tipo di piattaforma. Un'app SSG è impostata sul tipo `WEB` di piattaforma. Un'app SSR che utilizza Next.js versione 11 è impostata sul tipo di piattaforma. `WEB_DYNAMIC` Per le app distribuite su Next.js 12 o versioni successive utilizzando SSR gestito da Amplify Hosting compute, il tipo di piattaforma è impostato su. `WEB_COMPUTE`

Quando hai distribuito la tua app come app SSG, Amplify ha impostato il tipo di piattaforma su. `WEB` Usa il AWS CLI per cambiare la piattaforma della tua app. `WEB_COMPUTE` Apri una finestra di terminale e inserisci il seguente comando, aggiornando il testo in rosso con l'ID e la regione dell'app univoci.

```
aws amplify update-app --app-id {{abcd1234}} --platform WEB_COMPUTE --region {{us-west-2}}
```

## Aggiungere un ruolo di servizio
<a name="add-service-role"></a>

Un ruolo di servizio è il ruolo AWS Identity and Access Management (IAM) che Amplify assume quando chiama altri servizi per tuo conto. Segui questi passaggi per aggiungere un ruolo di servizio a un'app SSG già distribuita con Amplify.

**Per aggiungere un ruolo di servizio**

1. Accedi Console di gestione AWS e apri la console [Amplify.](https://console.aws.amazon.com/amplify/)

1. Se non hai già creato un ruolo di servizio nel tuo account Amplify, [consulta Aggiungere un ruolo di servizio per completare questo passaggio](amplify-service-role.md) preliminare.

1. Scegli l'app statica Next.js a cui desideri aggiungere un ruolo di servizio.

1. Nel riquadro di navigazione, scegli **Impostazioni app**, **Generali**.

1. Nella pagina dei **dettagli dell'app**, scegli **Modifica**

1. Per **Ruolo di servizio**, scegli il nome di un ruolo di servizio esistente o il nome del ruolo di servizio creato nel passaggio 2.

1. Scegli **Save** (Salva).

## Aggiornamento delle impostazioni di build
<a name="update-build-settings"></a>

Prima di ridistribuire l'app con la funzionalità SSR, devi aggiornare le impostazioni di build dell'app su cui impostare la directory di output. `.next` Puoi modificare le impostazioni di build nella console Amplify o in `amplify.yml` un file archiviato nel tuo repository. Per ulteriori informazioni, consultare [Configurazione delle impostazioni di build per un'applicazione Amplify](build-settings.md).

Di seguito è riportato un esempio delle impostazioni di build per un'app in cui `baseDirectory` è impostato su. `.next`

```
version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: .next
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*
```

## Aggiornamento del file package.json
<a name="update-package.json-file"></a>

Dopo aver aggiunto un ruolo di servizio e aggiornato le impostazioni di build, aggiorna il file dell'app. `package.json` Come nell'esempio seguente, imposta lo script di compilazione in modo `"next build"` che indichi che l'app Next.js supporta sia le pagine SSG che SSR.

```
"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start"
},
```

Amplify rileva la modifica al file nel repository e ridistribuisce `package.json` l'app con funzionalità SSR.