Jump to content

Netlify

Netlify é um provedor de deploy alternativo semelhante à Vercel. Veja ajcwebdev/ct3a-netlify↗ para um exemplo de repositório baseado nesta documentação.

Por que hospedar na Netlify

A sabedoria popular diz que a Vercel possui um suporte melhor para Next.js já que foi ela que desenvolveu o Next.js. Eles possuem interesse em garantir que a plataforma esteja ajustada para um desempenho ideal e uma boa DX com Next.js. Isso é verdade para a maioria dos casos de uso, não fazendo sentido desviar-se do caminho padrão.

H√° tamb√©m um sentimento comum de que diversos recursos do Next.js s√£o suportados apenas na Vercel. Embora isso seja verdade para os novos recursos do Next.js que s√£o testados e suportados na Vercel deste o seu lan√ßamento, tamb√©m √© verdade que outros provedores como a Netlify buscam implementar e liberar rapidamente vers√Ķes de suporte‚Üó para recursos est√°veis do Next.js‚Üó

Existem diversos pr√≥s e contras dentre todos provedores de deploy, j√° que nenhum host pode consegue ter o melhor suporte para todos os casos de uso existente. Por exemplo, a Netlify criou o seu pr√≥prio Next.js runtime customizado‚Üó para as Netlify Edge Functions (que rodam no Deno Deploy) e mant√©m um √ļnico middleware para acessar e modificar respostas HTTP‚Üó.

‚ĄĻÔłŹ

Para verificar o status de recursos n√£o est√°veis do Next 13 veja Using the Next 13 app directory on Netlify‚Üó.

Configuração do Projeto

H√° diversas maneiras de configurar suas instru√ß√Ķes de build, incluindo diretamente atrav√©s da Netlify CLI ou pelo Netlify Dashboard. Embora n√£o seja obrigat√≥rio, √© recomend√°vel criar e incluir um arquivo netlify.toml‚Üó. Isso garante que as vers√Ķes fork ou clonadas do projeto sejam mais f√°ceis de implementar.

[build]
  command = "next build"
  publish = ".next"

Usando o Netlify Dashboard

  1. Dê o push de seu código para um repositório do GitHub e inscreva-se na Netlify↗. Depois de ter criado uma conta, clique em Add new site e então Import an existing project.

Novo projeto na Netlify

  1. Conecte o seu provedor Git.

Importar repositório

  1. Selecione o repositório de seu projeto.

Selecione o repositório de seu projeto

  1. A Netlify detectará se você possui um arquivo netlify.toml e então vai automaticamente configurar seu comando de build e diretório de publicação.

Configura√ß√Ķes de build do Nextjs

  1. Clique em Show advanced e ent√£o New variable para adicionar suas vari√°veis de ambiente.

Adicionar vari√°veis de ambiente

  1. Clique em Deploy site, aguarde até o processo de build terminar, e então veja seu novo site.

Usando a Netlify CLI

Para fazer o deploy a partir da linha de comando, primeiramente você fazer o push de seu projeto para um repositório do GitHub e instalar a Netlify CLI↗. Você pode instalar a netlify-cli como uma dependência de seu projeto ou instalar globalmente em sua máquina usando o seguinte comando:

npm i -g netlify-cli

Para testar o seu projeto localmente, rode o comando ntl dev↗ e abra localhost:8888↗ para ver sua aplicação Netlify rodando localmente:

ntl dev

Rode o comando ntl init‚Üó para configurar seu projeto:

ntl init

Importe as vari√°veis de ambiente de seu projeto que est√£o em seu arquivo .env com ntl env:import‚Üó:

ntl env:import .env

Faça o deploy de seu projeto com ntl deploy↗. Você precisará passar a flag --build para rodar o comando de build antes do deploy e a flag --prod para fazer o deploy do seu site em sua URL principal:

ntl deploy --prod --build

Para ver um exemplo rodando na Netlify, visite ct3a.netlify.app‚Üó.


Recent Contributors To This Page