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

È possibile aggiungere 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 la versione 12 o 13 di Next.js e aggiungi la funzionalità SSR. Quindi dovrai eseguire i seguenti passaggi.

1. Usa il AWS 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 il package.json file dell'app per indicare che l'app utilizza SSR.

Aggiorna la piattaforma

Esistono tre valori validi per il tipo di piattaforma. Un'app SSG è impostata sul tipo WEB di piattaforma. Un'app SSR che utilizza Next.js versione 11 è impostata sul tipo di piattaforma. WEB_DYNAMIC Per le app distribuite su Next.js 12 o 13 utilizzando SSR gestito da Amplify Hosting compute, il tipo di piattaforma è impostato su. WEB_COMPUTE

Quando hai distribuito la tua app come app SSG, Amplify ha impostato il tipo di piattaforma su. WEB Usa il AWS CLI per cambiare la piattaforma della tua app. WEB_COMPUTE Apri una finestra di terminale e inserisci il seguente comando, aggiornando il testo in rosso con l'ID e la regione dell'app 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 ruolo AWS Identity and Access Management (IAM) che Amplify assume quando chiama altri servizi per tuo conto. Segui questi passaggi per aggiungere un ruolo di servizio a un'app SSG già distribuita con Amplify.

Per aggiungere un ruolo di servizio

1. Accedi AWS 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. Per Ruolo di servizio, scegli il nome di un ruolo di servizio esistente o il nome del ruolo di servizio creato nel passaggio 2.

7. Selezionare Salva.

Aggiorna le impostazioni di build

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

Di seguito è riportato un esempio delle impostazioni di build per un'app in cui baseDirectory è 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 aggiornato le impostazioni di build, aggiorna il file dell'app. package.json Come nell'esempio seguente, imposta lo script di compilazione in modo "next build" che indichi che l'app Next.js supporta sia le pagine SSG che SSR.

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

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