Implantando um aplicativo SSR Next.js com o Amplify

Por padrão, o Amplify implanta novas aplicações de SSR usando o serviço de computação do Amplify Hosting com suporte para Next.js 12 e 13. A computação do Amplify Hosting gerencia integralmente os recursos necessários para implantar uma aplicação de SSR. Os aplicativos SSR em sua conta do Amplify que você implantou antes de 17 de novembro de 2022 estão usando o provedor SSR Classic (somente Next.js 11).

É altamente recomendável que você migre aplicativos usando o SSR Classic (somente Next.js 11) para o provedor de SSR de computação do Amplify Hosting. O Amplify não realiza migrações automáticas para você. Você deve migrar manualmente seu aplicativo e, em seguida, iniciar uma nova compilação para concluir a atualização. Para obter instruções, consulte Migrando um aplicativo SSR Next.js 11 para a computação do Amplify Hosting.

Use as instruções a seguir para implantar um novo aplicativo SSR.

Para implantar um aplicativo SSR no Amplify usando o provedor de SSR de computação do Amplify Hosting

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

2. Na página Todos os aplicativos, escolha Novo aplicativo e, em seguida, Hospedar aplicativo web.

3. Selecione seu provedor GitHub, Bitbucket ou AWS CodeCommit repositório e GitLab, em seguida, escolha Continuar.

4. Na página Adicionar ramificação do repositório, faça o seguinte:

   1. Na lista Repositórios atualizados recentemente, selecione o nome do repositório a ser conectado.

   2. Na lista Ramificação, selecione o nome da ramificação do repositório a ser conectada.

   3. Escolha Próximo.

5. O aplicativo requer um perfil de serviço IAM que o Amplify assume ao chamar outros serviços em seu nome. É possível permitir que a computação do Amplify Hosting crie automaticamente um perfil de serviço ou especificar um perfil que criou.

   • Para permitir que o Amplify crie automaticamente um perfil e o anexe ao seu aplicativo

     1. Na seção Perfil do IAM, escolha Criar e usar um novo perfil de serviço.

   • Para anexar um perfil de serviço que você criou anteriormente

     1. Na seção Perfil do IAM, escolha Usar um perfil de serviço existente.

     2. Escolha o perfil a ser usado na lista.

6. Escolha Próximo.

7. Na página Revisar, escolha Salvar e implantar.

Configurações do arquivo Package.json

Quando você implanta um aplicativo Next.js, o Amplify inspeciona o script de compilação do aplicativo no package.json arquivo para detectar se o aplicativo é SSR ou SSG.

Veja a seguir um exemplo do script de compilação de um aplicativo SSR do Next.js. O script de compilação "next build" indica que o aplicativo é compatível com páginas SSG e SSR.

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

Veja a seguir um exemplo do script de compilação de um aplicativo SSG do Next.js. O script de compilação "next build && next export" indica que o aplicativo é compatível somente com páginas SSG.

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

Configurações de compilação do Amplify

Depois de inspecionar o package.json arquivo do seu aplicativo para determinar se você está implantando um aplicativo SSG ou SSR, o Amplify verifica as configurações da compilação do aplicativo. É possível salvar as configurações da compilação no console do Amplify ou em um arquivo amplify.yml na raiz do seu repositório. Para ter mais informações, consulte Configurar as definições de compilação.

Se o Amplify detectar que você está implantando um aplicativo SSR Next.js e nenhum arquivo amplify.yml estiver presente, ele gerará uma especificação de compilação para o aplicativo e definirá baseDirectory como .next. Se você estiver implantando um aplicativo em que um arquivo amplify.yml esteja presente, as configurações da compilação no arquivo substituirão todas as configurações da compilação no console. Portanto, você deve definir manualmente o valor baseDirectory para .next no arquivo.

Veja a seguir um exemplo das configurações da compilação de um aplicativo em que baseDirectory está definido como .next. Isso indica que os artefatos de compilação são de um aplicativo Next.js compatível com páginas SSG e SSR.

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

Se o Amplify detectar que você está implantando um aplicativo SSG, ele gera uma especificação de compilação para o aplicativo e define baseDirectory como out. Se você estiver implantando um aplicativo em que um arquivo amplify.yml está presente, deverá definir manualmente o valor baseDirectory para out no arquivo.

Veja a seguir um exemplo das configurações da compilação de um aplicativo em que baseDirectory está definido como out. Isso indica que os artefatos de compilação são para um aplicativo Next.js que oferece suporte somente a páginas SSG.

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