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 a funcionalidade SSR a um aplicativo Next.js estático
<a name="redeploy-ssg-to-ssr"></a>

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

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

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

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

1. Atualize o `package.json` arquivo do aplicativo para indicar que o aplicativo usa SSR.

## Atualização da plataforma
<a name="update-platform"></a>

Há três valores válidos de plataforma. Um aplicativo SSG está configurado para o tipo de plataforma `WEB`. Um aplicativo SSR usando o Next.js versão 11 está configurado para o tipo de plataforma `WEB_DYNAMIC`. Para aplicações implantadas no Next.js 12 ou posterior usando SSR gerenciado pela computação do Amplify Hosting, o tipo de plataforma está definido como `WEB_COMPUTE`.

Quando você implantou seu aplicativo como um aplicativo SSG, o Amplify definiu o tipo de plataforma como `WEB`. Use o AWS CLI para alterar a plataforma do seu aplicativo para`WEB_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
<a name="add-service-role"></a>

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 um perfil de serviço a um aplicativo SSG que já está implantado com o Amplify.

**Para criar um perfil de serviço**

1. Faça login no Console de gerenciamento da AWS e abra o console do [Amplify](https://console.aws.amazon.com/amplify/).

1. Se você ainda não criou um perfil de serviço em sua conta do Amplify, consulte [Adicionar um perfil de serviço](amplify-service-role.md) para concluir esta etapa de pré-requisito.

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

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

1. Na página **Detalhes do aplicativo**, selecione **Editar**

1. 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.

1. Escolha **Salvar**.

## Atualização das configurações de compilação
<a name="update-build-settings"></a>

Antes de reimplantar seu aplicativo com a funcionalidade SSR, é necessário atualizar as configurações da 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 do Amplify](build-settings.md).

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
<a name="update-package.json-file"></a>

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 compilação para `"next build"` indicar que o aplicativo Next.js é compatível com páginas SSG e SSR.

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

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