Adicionar 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 funcionalidade. Em seguida, você precisará executar as etapas a seguir.

1. Use o comando AWS Command Line Interface para alterar o tipo de plataforma do aplicativo.

2. Adicione um perfil de serviço ao aplicativo.

3. Atualize o diretório de saída nas configurações da compilação do aplicativo.

4. Atualize o package.json arquivo do aplicativo para indicar que o aplicativo usaSSR.

Atualize a 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 comando 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

Adicione um perfil de serviço

Uma função de serviço é a AWS Identity and Access Management (IAM) função 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.

Para criar um perfil de serviço

1. Faça login no AWS Management Console e abra o console do Amplify.

2. Se você ainda não criou um perfil de serviço em sua conta do Amplify, consulte Adicionar um perfil de serviço para concluir esta etapa de pré-requisito.

3. Escolha o aplicativo estático do Next.js ao qual você deseja adicionar um perfil de serviço.

4. No painel de navegação, em Configurações do aplicativo, selecione Geral.

5. Na página Detalhes do aplicativo, selecione Editar

6. Em Perfil de serviço, escolha o nome de um perfil de serviço existente ou o nome do perfil de serviço que você criou na etapa 2.

7. Escolha Salvar.

Atualize as configurações da 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, Definindo as configurações de compilação de um aplicativo.

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

Atualize o 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