As traduções são geradas por tradução automática. Em caso de conflito entre o conteúdo da tradução e da versão original em inglês, a versão em inglês prevalecerá.

Adicionando SSR funcionalidade a um aplicativo Next.js estático

Você pode adicionar SSR funcionalidade a um aplicativo Next.js estático (SSG) existente implantado com o Amplify. Antes de iniciar o processo de conversão do SSG aplicativo emSSR, atualize o aplicativo para usar a versão 12 ou posterior do Next.js e adicione SSR funcionalidades. Em seguida, você precisará executar as etapas a seguir.

Atualização da plataforma

Há três valores válidos de plataforma. Um SSG aplicativo está configurado para o tipo de plataformaWEB. Um SSR aplicativo usando a versão 11 do Next.js está definido como tipo de plataformaWEB_DYNAMIC. Para aplicativos implantados no Next.js 12 ou posterior usando a computação SSR gerenciada pelo Amplify Hosting, o tipo de plataforma está definido como. WEB_COMPUTE

Quando você implantou seu aplicativo como um SSG aplicativo, o Amplify definiu o tipo de plataforma como. WEB Use o AWS CLI para alterar a plataforma do seu aplicativo paraWEB_COMPUTE. Abra uma janela de terminal e digite o comando a seguir, atualizando o texto em vermelho com seu ID de aplicativo e região exclusivos.

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

Adicionar um perfil de serviço

Uma função de serviço é a função AWS Identity and Access Management (IAM) que o Amplify assume ao ligar para outros serviços em seu nome. Siga estas etapas para adicionar uma função de serviço a um SSG aplicativo que já está implantado com o Amplify.

Atualização das configurações de compilação

Antes de reimplantar seu aplicativo com SSR funcionalidade, você deve atualizar as configurações de compilação do aplicativo para definir o diretório de saída como. .next É possível editar as configurações da compilação no console do Amplify ou em um arquivo amplify.yml armazenado em seu repositório. Para obter mais informações, consulte Definição das configurações de compilação de uma aplicação.

Veja a seguir um exemplo das configurações da compilação de um aplicativo em que baseDirectory está definido como .next.

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

Atualização do arquivo package.json

Depois de adicionar um perfil de serviço e atualizar as configurações da compilação, atualize o arquivo package.json do aplicativo. Como no exemplo a seguir, defina o script de construção "next build" para indicar que o aplicativo Next.js oferece suporte a ambas SSG as SSR páginas.

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

O Amplify detecta a alteração no package.json arquivo em seu repositório e reimplanta o aplicativo com funcionalidade. SSR