Aggiungere la funzionalità SSR a un'app Next.js statica

Puoi aggiungere la 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 le fasi seguenti.

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

2. Aggiungi un ruolo di servizio all'app.

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

4. Aggiorna ilpackage.json file dell'app per indicare che l'app utilizza SSR.

Aggiornamento della piattaforma

Sono disponibili tre valori validi per il tipo di piattaforma. Un'app SSG è impostata sul tipo di piattaformaWEB. Un'app SSR che utilizza Next.js versione 11 è impostata sul tipo di piattaformaWEB_DYNAMIC. Per le app distribuite su Next.js 12 utilizzando SSR gestito da Amplify Hosting compute, il tipo di piattaforma è impostato suWEB_COMPUTE.

Quando hai distribuito la tua app come app SSG, Amplify ha impostato il tipo di piattaforma suWEB. UtilizzaloAWS CLI per cambiare la piattaforma della tua appWEB_COMPUTE. Apri una finestra di terminale e inserisci il seguente comando, aggiornando il testo in rosso con il tuo ID app e la tua regione univoci.

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

Aggiungi un ruolo di servizio

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

Per aggiungere un ruolo di servizio

1. AccediAWS Management Console e apri la console Amplify.

2. Se non hai già creato un ruolo di servizio nel tuo account Amplify, consulta Aggiungere un ruolo di servizio per completare questo passaggio preliminare.

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

4. Nel riquadro di navigazione, scegli Impostazioni app, Generali.

5. Nella pagina dei dettagli dell'app, scegli Modifica

6. In Ruolo di servizio, scegli il nome di un ruolo di servizio esistente o il nome del ruolo di servizio che hai creato nel passaggio 2.

7. Seleziona Salva.

Aggiornamento delle impostazioni di build

Prima di ridistribuire l'app con la funzionalità SSR, è necessario aggiornare le impostazioni di build dell'app in cui impostare la directory di output.next. Puoi modificare le impostazioni di build nella console di Amplify o in unamplify.yml file archiviato nel tuo repository. Per ulteriori informazioni, consultare Configurazione delle impostazioni di compilazione.

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

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

Aggiorna il file package.json

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

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

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