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

Puoi aggiungere SSR funzionalità a un'app statica (SSG) Next.js esistente distribuita con Amplify. Prima di iniziare il processo di conversione dell'SSGapp inSSR, aggiorna l'app per utilizzare Next.js versione 12 o successiva e aggiungi 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 utilizzaSSR.

Aggiornamento della piattaforma

Esistono tre valori validi per il tipo di piattaforma. Un'SSGapp è impostata sul tipo di piattaformaWEB. Un'SSRapp che utilizza Next.js versione 11 è impostata sul tipo di piattaformaWEB_DYNAMIC. Per le app distribuite su Next.js 12 o versioni successive utilizzando il calcolo SSR gestito da Amplify Hosting, il tipo di piattaforma è impostato su. WEB_COMPUTE

Quando hai distribuito la tua app come SSG app, 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

Aggiungere 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'SSGapp 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. Seleziona Salva.

Aggiornamento delle impostazioni di build

Prima di ridistribuire l'app con SSR funzionalità, è necessario 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, consultare Configurazione delle impostazioni di build per un'app.

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/**/*

Aggiornamento del 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 che SSG le SSR pagine.

"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