Distribuzione di un'SSRapplicazione Next.js su Amplify

Per impostazione predefinita, Amplify distribuisce nuove SSR app utilizzando il servizio di elaborazione di Amplify Hosting con supporto per Next.js 12, 13 e 14. Amplify Hosting compute gestisce completamente le risorse necessarie per distribuire un'app. SSR SSRle app del tuo account Amplify che hai distribuito prima del 17 novembre 2022 utilizzano il provider Classic (solo Next.js 11). SSR

Ti consigliamo vivamente di migrare le app utilizzando Classic (solo Next.js 11) SSR al provider di elaborazione Amplify Hosting. SSR 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'SSRapp Next.js 11 al calcolo Amplify Hosting.

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

Per distribuire un'SSRapp su Amplify utilizzando il provider di elaborazione Amplify Hosting SSR

1. Accedi al AWS Management Console e apri la console Amplify.

2. Nella pagina Tutte le app, scegli Crea nuova app.

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

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

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

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

   3. Scegli Next (Successivo).

5. L'app richiede un ruolo IAM di servizio 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. Scegli Crea e usa un nuovo ruolo di servizio.

   • Per associare un ruolo di servizio creato in precedenza:

     1. Scegli Usa un ruolo di servizio esistente.

     2. Seleziona il ruolo da utilizzare dall'elenco.

6. Scegli Next (Successivo).

7. Nella pagina Revisione, scegli Salva e distribuisci.

Impostazioni del file Package.json

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 entrambe SSG le SSR pagine. Questo script di compilazione viene utilizzato anche per le app Next.js 14 o SSG versioni successive.

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

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

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

Amplify le impostazioni di build per un'applicazione Next.js SSR

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'app.

Se Amplify rileva che stai distribuendo un'app SSR Next.js e amplify.yml non è presente 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 amplify.yml file, le impostazioni di build nel 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 eSSR.

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 Next.js 13 o precedente SSG

Se Amplify rileva che stai distribuendo un'app Next.js 13 o SSG precedente, genera una specifica di build per l'app e la imposta su. baseDirectory out Se stai distribuendo un'app in cui è presente un amplify.yml file, devi impostarlo manualmente nel baseDirectory file. 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 elementi di compilazione si riferiscono a un'app Next.js 13 o precedente che supporta solo SSG pagine.

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 Next.js 14 SSG

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

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

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