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

Implementazione di un'applicazione Next.js SSR su Amplify

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. 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 Next.js (solo 11).

Ti consigliamo vivamente di migrare le app utilizzando l'SSR classico (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 su Amplify Hosting Computer.

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

Package.json impostazioni dei file

Quando distribuisci un' Next.js app, 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 build viene utilizzato anche per Next.js 14 o versioni successive, solo app SSG.

"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

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.

Se Amplify rileva che stai distribuendo Next.js un'app SSR 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' Next.js app 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/**/*

Amplify: impostazioni di build per Next.js un'applicazione SSG 1.3 o precedente

Se Amplify rileva che stai implementando Next.js un'app SSG 13 o 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 file. baseDirectory out La out directory è la cartella predefinita Next.js creata 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 della build 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: impostazioni di build per Next.js un'applicazione SSG 1.4 o successiva

Nella Next.js versione 14, il next export comando era obsoleto e sostituito con output: 'export' nel file per abilitare le esportazioni statiche. next.config.js Se stai implementando un'applicazione Next.js 14 SSG solo nella console, Amplify 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, devi impostarlo manualmente nel file. baseDirectory .next Questa è la stessa baseDirectory impostazione utilizzata da Amplify Next.js WEB_COMPUTE per le applicazioni che supportano sia le pagine SSG che SSR.

Di seguito è riportato un esempio delle impostazioni di build per un'app solo Next.js 14 SSG 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/**/*