

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

# Distribuzione di un'applicazione SSR Next.js su Amplify
<a name="deploy-nextjs-app"></a>

Per impostazione predefinita, Amplify distribuisce nuove app SSR utilizzando il servizio di elaborazione di Amplify Hosting con supporto per le versioni da 12 a 15 di Next.js. Amplify Hosting compute gestisce completamente le risorse necessarie per implementare un'app SSR. Le app SSR nel tuo account Amplify che hai distribuito prima del 17 novembre 2022 utilizzano il provider SSR Classic (solo Next.js 11). 

Ti consigliamo vivamente di migrare le app utilizzando l'SSR Classic (solo Next.js 11) al provider SSR di elaborazione Amplify Hosting. Amplify non esegue migrazioni automatiche per te. È necessario migrare manualmente l'app e quindi avviare una nuova build per completare l'aggiornamento. Per istruzioni, consulta [Migrazione di un'app SSR Next.js 11 al calcolo Amplify Hosting](update-app-nextjs-version.md). 

Utilizza le seguenti istruzioni per distribuire una nuova app SSR Next.js.

**Per distribuire un'app SSR su Amplify utilizzando il provider SSR di calcolo Amplify Hosting**

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

1. Nella pagina **Tutte le app**, scegli **Crea nuova** app.

1. **Nella pagina **Inizia a creare con Amplify**, scegli il tuo provider di repository Git, quindi scegli Avanti.**

1. Nella pagina **Aggiungi ramo del repository**, procedi come segue:

   1. Nell'elenco dei **repository aggiornati di recente**, seleziona il nome del repository da connettere.

   1. Nell'elenco **Branch**, seleziona il nome del ramo del repository da connettere.

   1. Scegli **Next (Successivo)**.

1. L'app richiede un ruolo di servizio IAM che Amplify assume quando chiama altri servizi per tuo conto. Puoi consentire ad Amplify Hosting compute di creare automaticamente un ruolo di servizio per te oppure puoi specificare un ruolo che hai creato.
   + Per consentire ad Amplify di creare automaticamente un ruolo e associarlo alla tua app:

     1. Scegliere **Crea e utilizza un nuovo ruolo di servizio**.
   + Per allegare un ruolo di servizio creato in precedenza:

     1. Scegli **Usa un ruolo di servizio esistente**.

     1. Seleziona il ruolo da utilizzare dall'elenco.

1. Scegli **Next (Successivo)**.

1. Nella pagina **Revisione**, scegli **Salva e distribuisci.**

## Impostazioni del file Package.json
<a name="package.json-settings"></a>

Quando distribuisci un'app Next.js, Amplify esamina lo script di compilazione dell'app nel file per determinare `package.json` il tipo di applicazione.

Di seguito è riportato un esempio dello script di compilazione per un'app Next.js. Lo script di compilazione `"next build"` indica che l'app supporta sia le pagine SSG che SSR. Questo script di compilazione viene utilizzato anche per le app SSG Next.js 14 o versioni successive.

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

Di seguito è riportato un esempio dello script di compilazione per un'app SSG Next.js 13 o precedente. Lo script di compilazione `"next build && next export"` indica che l'app supporta solo pagine SSG.

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

## Amplify le impostazioni di build per un'applicazione SSR Next.js
<a name="build-setting-detection"></a>

Dopo aver esaminato il `package.json` file dell'app, Amplify verifica le impostazioni di build dell'app. Puoi salvare le impostazioni di build nella console Amplify o in `amplify.yml` un file nella radice del tuo repository. Per ulteriori informazioni, consulta [Configurazione delle impostazioni di build per un'applicazione Amplify](build-settings.md).

Se Amplify rileva che stai distribuendo un'app SSR Next.js e non è presente `amplify.yml` alcun file, genera una specifica di build per l'app e la imposta su. `baseDirectory` `.next` Se stai distribuendo un'app in cui è presente un file, le impostazioni di build nel `amplify.yml` file sostituiscono tutte le impostazioni di build nella console. Pertanto, è necessario impostare manualmente il `baseDirectory` to `.next` nel file.

Di seguito è riportato un esempio delle impostazioni di build per un'app in cui `baseDirectory` è impostato su`.next`. Ciò indica che gli artefatti della build riguardano un'app Next.js che supporta pagine SSG e SSR.

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

## Amplify le impostazioni di build per un'applicazione SSG Next.js 13 o precedente
<a name="build-setting-detection-ssg-13"></a>

Se Amplify rileva che stai distribuendo un'app SSG Next.js 13 o precedente, genera una specifica di build per l'app e la imposta su. `baseDirectory` `out` Se state distribuendo un'app in cui è presente un `amplify.yml` file, dovete impostarlo manualmente nel file. `baseDirectory` `out` La `out` directory è la cartella predefinita creata da Next.js per archiviare le risorse statiche esportate. Quando configuri le impostazioni delle specifiche di build dell'app, modifica il nome della `baseDirectory` cartella in modo che corrisponda alla configurazione dell'app.

Di seguito è riportato un esempio delle impostazioni di compilazione per un'app in cui `baseDirectory` è impostato `out` per indicare che gli artefatti di compilazione si riferiscono a un'app Next.js 13 o precedente che supporta solo pagine SSG. 

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

## Amplify le impostazioni di build per un'applicazione SSG Next.js 14 o successiva
<a name="build-setting-detection-ssg-14"></a>

Nella versione 14 di Next.js, il `next export` comando era obsoleto e sostituito con `output: 'export'` nel file per abilitare le esportazioni statiche. `next.config.js` Se stai distribuendo un'applicazione Next.js 14 SSG solo nella console, Amplify genera una buildspec per l'app e la imposta su. `baseDirectory` `.next` Se state distribuendo un'app in cui è presente un `amplify.yml` file, dovete impostarlo manualmente nel file. `baseDirectory` `.next` Questa è la stessa `baseDirectory` impostazione utilizzata da Amplify per le applicazioni `WEB_COMPUTE` Next.js che supportano sia le pagine SSG che SSR.

Di seguito è riportato un esempio delle impostazioni di build per un'app Next.js 14 SSG solo con l'impostazione su. `baseDirectory` `.next` 

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