Implantação de um SSR aplicativo Next.js no Amplify

Por padrão, o Amplify implanta novos aplicativos SSR usando o serviço de computação da Amplify Hosting com suporte para Next.js 12, 13 e 14. A computação do Amplify Hosting gerencia totalmente os recursos necessários para implantar um aplicativo. SSR SSRos aplicativos em sua conta do Amplify que você implantou antes de 17 de novembro de 2022 estão usando o provedor Classic (somente Next.js 11). SSR

É altamente recomendável que você migre aplicativos usando o Classic (somente Next.js 11) SSR para o provedor de computação Amplify HostingSSR. 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 SSR aplicativo Next.js 11 para a computação do Amplify Hosting.

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

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

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

2. Na página Todos os aplicativos, escolha Criar novo aplicativo.

3. Na página Comece a criar com o Amplify, escolha seu provedor de repositório Git e escolha Avançar.

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 uma função IAM de serviço que o Amplify assume ao ligar para 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 uma função e a anexe ao seu aplicativo:

     1. Escolha Criar e usar um novo perfil de serviço.

   • Para anexar uma função de serviço que você criou anteriormente:

     1. Escolha Usar uma função de serviço existente.

     2. Selecione a função a ser usada 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 construção do aplicativo no package.json arquivo para determinar o tipo de aplicativo.

Veja a seguir um exemplo do script de criação de um aplicativo Next.js. O script de construção "next build" indica que o aplicativo é compatível com SSR páginas SSG e ambas. Esse script de construção também é usado SSG somente para aplicativos Next.js 14 ou posteriores.

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

Veja a seguir um exemplo do script de criação de um SSG aplicativo Next.js 13 ou anterior. O script de criação "next build && next export" indica que o aplicativo oferece suporte somente a SSG páginas.

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

Amplifique as configurações de compilação para um aplicativo Next.js SSR

Depois de inspecionar o package.json arquivo do seu aplicativo, o Amplify verifica as configurações de 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 obter mais informações, consulte Definindo as configurações de compilação de um aplicativo.

Se o Amplify detectar que você está implantando um SSR aplicativo Next.js e nenhum amplify.yml arquivo estiver presente, ele gerará uma especificação de construção para o aplicativo e definirá como. baseDirectory .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 construção são para um aplicativo Next.js que oferece suporte SSG a SSR páginas.

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

Amplifique as configurações de compilação para um aplicativo Next.js 13 ou anterior SSG

Se o Amplify detectar que você está implantando um SSG aplicativo Next.js 13 ou anterior, ele gera uma especificação de compilação para o aplicativo e define como. baseDirectory 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. O out diretório é a pasta padrão que o Next.js cria para armazenar ativos estáticos exportados. Ao definir as configurações de especificação de compilação do seu aplicativo, altere o nome da baseDirectory pasta para corresponder à configuração do seu aplicativo.

Veja a seguir um exemplo das configurações de compilação de um aplicativo que baseDirectory está definido out para indicar que os artefatos de compilação são de um aplicativo Next.js 13 ou anterior que oferece suporte somente a SSG páginas.

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

Amplifique as configurações de compilação para um aplicativo Next.js 14 SSG

Na versão 14 do Next.js, o next export comando foi descontinuado e substituído pelo output: 'export' no next.config.js arquivo para permitir exportações estáticas. Se você estiver implantando um aplicativo SSG somente para Next.js 14 no console, o Amplify gera uma especificação de construção para o aplicativo e define como. baseDirectory .next Se você estiver implantando um aplicativo em que um arquivo amplify.yml está presente, deverá definir manualmente o valor baseDirectory para .next no arquivo. Essa é a mesma baseDirectory configuração que o Amplify usa para WEB_COMPUTE aplicativos Next.js que oferecem suporte a páginas SSG e SSR ambas.

Veja a seguir um exemplo das configurações de compilação de um aplicativo SSG somente do Next.js 14 com o baseDirectory definido como.next.

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