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

# Implemente um Next.js aplicativo no Amplify Hosting
<a name="getting-started-next"></a>

Este tutorial explica como criar e implantar um Next.js aplicativo a partir de um repositório Git.

Antes de começar este tutorial, conclua os pré-requisitos a seguir.

**Criar uma aplicação.**  
*Crie um Next.js aplicativo básico para usar neste tutorial, usando as instruções [create-next-app](https://nextjs.org/docs/app/api-reference/create-next-app) na documentação. Next.js*

**Crie um repositório Git**  
O Amplify suporta GitHub Bitbucket e. GitLab AWS CodeCommit Envie sua aplicação `create-next-app` para seu repositório Git.

## Etapa 1: conectar um repositório Git
<a name="step-1-connect-repository"></a>

Nesta etapa, você conecta seu Next.js aplicativo em um repositório Git ao Amplify Hosting.

**Para conectar uma aplicação a um repositório Git**

1. Abra o [console do Amplify](https://console.aws.amazon.com/amplify/).

1. Se você estiver implantando sua primeira aplicação na região atual, por padrão, você começará na página de serviço do **AWS Amplify**.

   Na parte superior da página, escolha **Implantar uma aplicação**.

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

   Para GitHub repositórios, o Amplify usa GitHub o recurso Apps para autorizar o acesso ao Amplify. Para obter mais informações sobre como instalar e autorizar o GitHub aplicativo, consulte[Configurando o acesso do Amplify aos repositórios GitHub](setting-up-GitHub-access.md).
**nota**  
Depois de autorizar o console do Amplify com o Bitbucket GitLab, ou AWS CodeCommit, o Amplify busca um token de acesso do provedor do repositório, mas *não armazena o token nos servidores*. AWS O Amplify acessa seu repositório usando chaves de implantação instaladas somente em um repositório específico.

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

   1. Selecione o nome do repositório a ser conectado.

   1. Selecione o nome da ramificação do repositório a ser conectada.

   1. Escolha **Próximo**.

## Etapa 2: confirmar as configurações de compilação
<a name="step-2a-confirm-build-settings-for-the-front-end"></a>

O Amplify detecta automaticamente a sequência de comandos de compilação a ser executada na ramificação que você está implantando. Nesta etapa, você revisa e confirma suas configurações de compilação.

**Para confirmar as configurações de compilação de uma aplicação**

1. Na página de **Configurações da aplicação**, localize a seção **Configurações de compilação**.

   Verifique se o **Comando de compilação do frontend** e o **Diretório de saída da compilação** estão corretos. Para este aplicativo de Next.js exemplo, o **diretório de saída do Build** está definido como`.next`.

1. O procedimento para adicionar um perfil de serviço varia dependendo se você deseja criar um novo perfil ou usar um existente.
   + Para criar um novo perfil:

     1. Escolha **Criar e usar um novo perfil de serviço**.
   + Para usar um perfil existente:

     1. Escolha **Usar um perfil existente**.

     1. Na lista de perfis de serviço, selecione o perfil a ser usado.

1. Escolha **Próximo**.

## Etapa 3: Implantar um aplicativo
<a name="step-3-save-and-deploy"></a>

Nesta etapa, você implanta seu aplicativo na rede AWS global de entrega de conteúdo (CDN).

**Para salvar e implantar uma aplicação**

1. Na página **Revisão**, confirme se os detalhes do repositório e as configurações da aplicação estão corretos.

1. Escolha **Salvar e implantar**. Sua compilação do frontend geralmente leva de 1 a 2 minutos, mas pode variar de acordo com o tamanho da aplicação.

1. Depois de concluir a implantação, sua aplicação poderá ser visualizada por meio do link para o domínio padrão `amplifyapp.com`.

**nota**  
Para aumentar a segurança de seus aplicativos do Amplify, o domínio *amplifyapp.com* é registrado na [Lista Pública de Sufixos (PSL)](https://publicsuffix.org/). Para maior segurança, recomendamos que você use cookies com um prefixo `__Host-` se precisar definir cookies confidenciais no nome de domínio padrão para seus aplicativos do Amplify. Essa prática ajudará a defender seu domínio contra tentativas de falsificação de solicitação entre sites (CSRF). Para obter mais informações, consulte a [Set-Cookie](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie#cookie_prefixes)página na Rede de Desenvolvedores da Mozilla.

## Etapa 4: (opcional) limpar recursos
<a name="step-4-clean-up"></a>

Se você não precisa mais da aplicação que implantou no tutorial, é possível excluí-la. Esta etapa ajuda a garantir que você não será cobrado pelos recursos que não está utilizando.

**Para excluir uma aplicação**

1. No menu **Configurações da aplicação**, no painel de navegação, escolha **Configurações gerais**.

1. Na página **Configurações gerais**, escolha **Excluir aplicação**.

1. Na janela de confirmação, insira **delete**. Em seguida, selecione **Excluir aplicação**.

## Adicionar recursos à sua aplicação
<a name="next-steps"></a>

Agora que você tem uma aplicação implantada no Amplify, será possível explorar alguns dos recursos a seguir que estão disponíveis para sua aplicação hospedada.

**Variáveis de ambiente**  
As aplicações geralmente precisam de informações de configuração no runtime. Essas configurações podem ser detalhes da conexão do banco de dados, chaves de API ou parâmetros. As variáveis de ambiente fornecem uma forma de expor essas configurações no momento da compilação. Para obter mais informações, consulte [Environment variables](environment-variables.md).

**Domínios personalizados**  
Neste tutorial, o Amplify hospeda sua aplicação para você no domínio padrão `amplifyapp.com` com uma URL como `https://branch-name.d1m7bkiki6tdw1.amplifyapp.com`. Quando você conecta seu aplicativo a um domínio personalizado, os usuários veem que seu aplicativo está hospedado em um URL personalizado, como `https://www.example.com`. Para obter mais informações, consulte [Configuração de domínios personalizado](custom-domains.md).

**Pré-visualizações de solicitação pull**  
As pré-visualizações de solicitação pull da Web oferecem às equipes uma maneira de visualizar as alterações das solicitações pull (PRs) antes de mesclar o código a uma ramificação de produção ou integração. Para obter mais informações, consulte [Pré-visualizações da Web para solicitações pull](pr-previews.md).

**Gerenciar vários ambientes**  
Para saber como o Amplify funciona com ramificações de recursos e GitFlow fluxos de trabalho para oferecer suporte a várias implantações, consulte Implantações de [ramificações de recursos](multi-environments.md) e fluxos de trabalho de equipe.