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á.
# Implantação de uma aplicação SSR do Next.js no 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 versões do Next.js de 12 a 15. 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ê. É necessário migrar manualmente seu aplicativo e, em seguida, iniciar uma nova compilação para concluir a atualização. Para instruções, consulte [Migrando um aplicativo SSR Next.js 11 para a computação do Amplify Hosting](update-app-nextjs-version.md).
Use as instruções a seguir para implantar uma nova aplicação SSR.
**Para implantar um aplicativo SSR no Amplify usando o provedor de SSR de computação do Amplify Hosting**
1. Faça login no Console de gerenciamento da AWS e abra o console do [Amplify](https://console.aws.amazon.com/amplify/).
1. Na página **Todas as aplicações**, escolha **Criar nova aplicação**.
1. Na página **Comece a desenvolver com o Amplify**, escolha seu provedor de repositório Git e escolha **Avançar**.
1. 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.
1. Na lista **Ramificação**, selecione o nome da ramificação do repositório a ser conectada.
1. Escolha **Próximo**.
1. 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 à sua aplicação:
1. Escolha **Criar e usar um novo perfil de serviço**.
+ Para anexar um perfil de serviço que você criou anteriormente:
1. Selecione **Usar um perfil de serviço existente**.
1. Selecione o perfil a ser usado na lista.
1. Escolha **Próximo**.
1. Na página **Revisar**, escolha **Salvar e implantar**.
## Configurações do arquivo Package.json
Quando você implanta uma aplicação Next.js, o Amplify inspeciona o script de compilação da aplicação no arquivo `package.json` para detectar se a aplicação é SSR ou SSG.
Veja a seguir um exemplo do script de compilação de uma aplicação do Next.js. O script de compilação `"next build"` indica que o aplicativo é compatível com páginas SSG e SSR. Esse script de construção também é usado para aplicações somente SSG do Next.js 14 ou versões posteriores.
```
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
},
```
Veja a seguir um exemplo do script de compilação de uma aplicação SSG do Next.js 13 ou anterior. 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 para uma aplicação SSR do Next.js
Depois de inspecionar o arquivo `package.json` da sua aplicação, o Amplify verifica as configurações da compilação da aplicação. É 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 [Definição das configurações de compilação de uma aplicação do Amplify](build-settings.md).
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, é necessário 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/**/*
```
## Configurações de compilação do Amplify para uma aplicação SSR do Next.js 13 ou anterior
Se o Amplify detectar que você está implantando uma aplicação Next.js 13 ou anterior, ele gerará uma especificação de compilação para a aplicação e definirá `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. O diretório `out` é 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 da sua aplicação, altere o nome da pasta `baseDirectory` para corresponder à configuração da sua aplicação.
Veja a seguir um exemplo das configurações da compilação de uma aplicação em que `baseDirectory` está definido como `out` para indicar que os artefatos de compilação são de uma aplicação Next.js 13 ou anterior 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/**/*
```
## Configurações de compilação do Amplify para uma aplicação de SSR do Next.js 14 ou posteriores
Na versão 14 do Next.js, o comando `next export` foi descontinuado e substituído por `output: 'export'` no arquivo `next.config.js` para habilitar exportações estáticas. Se estiver implantando uma aplicação SSG do Next.js 14 no console, o Amplify gerará uma especificação de compilação para a aplicação e definirá `baseDirectory` como `.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 configuração `baseDirectory` que o Amplify usa para aplicações `WEB_COMPUTE` de Next.js que oferecem suporte a páginas SSG e SSR.
Veja a seguir um exemplo das configurações da compilação de uma aplicação SSG 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/**/*
```