Implementazione di un'app SSR Next.js con Amplify

Per impostazione predefinita, Amplify implementa nuove app SSR utilizzando il servizio di elaborazione di Amplify Hosting con supporto per Next.js 12 o versioni successive. Il computer Amplify Hosting 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 classico (solo Next.js 11) al provider SSR di calcolo 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 Next.js 11 SSR su un computer Amplify Hosting.

Usa le seguenti istruzioni per distribuire una nuova app SSR.

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

1. AccediAWS Management Console e apri la console Amplify.

2. Nella pagina Tutte le app, scegli Nuova app, quindi Host web app.

3. Seleziona il tuo provider GitHub GitLab, Bitbucket oAWS CodeCommit il repository, quindi scegli Continua.

4. Nella pagina Add repository (Add repository), esegui le operazioni seguenti:

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

   2. Nell'elenco delle filiali, selezionare il nome del ramo del repository da connettere.

   3. Seleziona Successivo.

5. L'app richiede un ruolo di servizio IAM che Amplify assume quando chiama altri servizi per conto dell'utente. Puoi consentire ad Amplify Hosting compute di creare automaticamente un ruolo di servizio per te oppure puoi specificare un ruolo che hai creato tu.

   • Per consentire ad Amplify di creare automaticamente un ruolo e collegarlo alla tua app

     1. Nella sezione Ruolo IAM, scegli Crea e usa un nuovo ruolo di servizio.

   • Per allegare un ruolo di servizio creato in precedenza

     1. Nella sezione Ruolo IAM, scegli Usa un ruolo di servizio esistente.

     2. Scegli il ruolo da utilizzare dall'elenco.

6. Seleziona Successivo.

7. Nella pagina Revisione, scegli Salva e distribuisci.

Impostazioni del file Package.json

Quando distribuisci un'app Next.js, Amplify controlla lo script di creazione dell'app nelpackage.json file per rilevare se l'app è SSR o SSG.

Di seguito è riportato un esempio di script di compilazione per un'app Next.js SSR. Lo script di compilazione"next build" indica che l'app supporta sia le pagine SSG che le pagine SSR.

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

Di seguito è riportato un esempio di script di compilazione per un'app SSG. Next.js 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 Build Build

Dopo aver esaminato ilpackage.json file dell'app per determinare se stai implementando un'app SSG o SSR, Amplify controlla le impostazioni di build per l'app. Puoi salvare le impostazioni di compilazione nella console Amplify o in unamplify.yml file nella directory principale del tuo repository. Per ulteriori informazioni, consulta Configurazione delle impostazioni di compilazione.

Se Amplify rileva che stai distribuendo un'app SSR Next.js e non è presente alcunamplify.yml file, genera una specifica di compilazione per l'app e impostabaseDirectory su.next. Se stai distribuendo un'app in cui è presente unamplify.yml file, le impostazioni di build nel file sostituiscono qualsiasi impostazione di build nella console. Pertanto, è necessariobaseDirectory impostarla manualmente.next nel file.

Di seguito è riportato un esempio delle impostazioni di build per un'app in cuibaseDirectory è impostato su.next. Ciò indica che gli artefatti della build riguardano un'app Next.js che supporta le 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/**/*

Se Amplify rileva che stai implementando un'app SSG, genera una specifica di build per l'app e si avviabaseDirectory. Se stai distribuendo un'app in cui è presente unamplify.yml file, devi impostarlo manualmenteout nel file.baseDirectory

Di seguito è riportato un esempio delle impostazioni di build per un'app in cuibaseDirectory è impostato suout. Ciò indica che gli artefatti della build riguardano un'app Next.js 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/**/*