Como Criar um Site Grátis com Vercel + Next.js (Tutorial 2026)

Por que Next.js + Vercel?

Existem dezenas de formas de criar um site grátis, mas Next.js + Vercel é a que faz mais sentido se você quer algo que seja ao mesmo tempo gratuito e profissional. Next.js é usado por Netflix, TikTok e GitHub — não é brinquedo. E a Vercel foi criada pelos próprios criadores do Next.js, então a integração é nativa e sem atrito.

A grande vantagem dessa combinação: você começa de graça, cresce com a estrutura que startups usam de verdade, e se um dia precisar escalar, o caminho já está traçado. Não precisa migrar para outra plataforma, não precisa reaprender nada — só upgrada o plano.

Comparando com alternativas: WordPress tem custo de hospedagem, Wix é fechado e limita personalização, GitHub Pages não suporta backend. Next.js + Vercel não tem nenhuma dessas limitações no free tier — e o código é seu, sem lock-in.

Pré-requisitos: o que você precisa ter antes

Antes de começar, você precisa ter instalado: Node.js (versão 18 ou superior) e Git. Se ainda não tem, vai em nodejs.org e instala a versão LTS — processo de 3 minutos. Git você provavelmente já tem se é dev, mas se não, vai em git-scm.com.

Precisa também de duas contas gratuitas: GitHub (github.com) e Vercel (vercel.com). Cria com seu e-mail comum — não precisa de cartão de crédito em nenhuma das duas. O GitHub vai armazenar seu código e a Vercel vai fazer o deploy automático sempre que você empurrar novos commits.

Criando o projeto

O Next.js tem uma ferramenta de scaffolding que monta toda a estrutura do projeto pra você. Abre o terminal e roda o comando abaixo. Ele vai fazer algumas perguntas — responde como mostrado nos comentários:

Depois do npm run dev, abre o navegador em localhost:3000. Você vai ver a página inicial do Next.js. A partir daí, qualquer mudança que fizer nos arquivos aparece na hora no navegador, sem precisar recarregar manualmente.

Personalizando design e conteúdo

A estrutura que importa está em src/app/. O arquivo page.tsx é a sua página inicial. O layout.tsx define o que aparece em todas as páginas (navbar, footer, etc). Vamos limpar o conteúdo padrão e criar algo seu:

Esse código usa Tailwind CSS, que já vem configurado no projeto. As classes como bg-zinc-950 (fundo escuro), text-lime-400 (texto verde limão) e flex são utilitários que estilizam direto no HTML. Se quiser mudar as cores, só troca os valores — a lista completa está em tailwindcss.com/docs.

Para adicionar novas páginas, cria uma pasta dentro de src/app/ com o nome da rota e um arquivo page.tsx dentro. Por exemplo, src/app/sobre/page.tsx vira a rota /sobre automaticamente. Sem configuração extra. O App Router do Next.js cuida de tudo isso por você.

Deploy na Vercel em 2 cliques

Antes de fazer o deploy, você precisa enviar o código para o GitHub. Se ainda não fez isso, é só criar um repositório novo no GitHub e seguir as instruções que ele mostra na tela — são 3 comandos git no terminal.

Domínio personalizado grátis

A URL meu-site.vercel.app funciona perfeitamente para portfólios e projetos pessoais. Mas se quiser um domínio próprio tipo meunome.com.br, tem duas opções: comprar um domínio (R$ 30-60/ano no Registro.br para .com.br) e apontar para a Vercel, ou usar um domínio gratuito de outros serviços.

Para apontar um domínio próprio na Vercel: entra no painel do seu projeto, vai em Settings > Domains, adiciona o domínio. A Vercel te dá os registros DNS que você precisa configurar onde comprou o domínio. O processo leva uns 10 minutos de configuração e até 24h para o DNS propagar — mas geralmente acontece em menos de 1 hora.

O HTTPS é configurado automaticamente com certificado SSL gratuito da Let's Encrypt. Você não precisa fazer nada para isso — a Vercel cuida de renovar o certificado também. Esse nível de automação é o que torna a stack tão atraente: você foca no produto, não em infraestrutura.

Próximos passos após o deploy

Site no ar é o começo, não o fim. Agora vem a parte de fazer o site trabalhar pra você — seja por visibilidade, tráfego orgânico ou monetização direta.

Perguntas frequentes

Se você aplicar «Pré-requisitos: o que você precisa ter antes» agora, o que muda amanhã?

Resposta direta do corpo: Antes de começar, você precisa ter instalado: Node.js (versão 18 ou superior) e Git. Se ainda não tem, vai em nodejs.org e instala a versão LTS — processo de 3 minutos. Git você provavelmente já tem se é dev, mas se não, vai em git-scm.com.

Como provar «Criando o projeto» com evidência do próprio texto?

Extraia só o mecanismo de «Criando o projeto»: O Next.js tem uma ferramenta de scaffolding que monta toda a estrutura do projeto pra você. Abre o terminal e roda o comando abaixo. Ele vai fazer algumas perguntas — responde como mostrado nos comentários:

Qual falha típica «Personalizando design e conteúdo» ajuda a evitar?

Checklist mental: A estrutura que importa está em src/app/. O arquivo page.tsx é a sua página inicial. O layout.tsx define o que aparece em todas as páginas (navbar, footer, etc). Vamos limpar o conteúdo padrão e criar algo seu: Depois revise se o resultado aparece sem você na call.

Como resumir «Deploy na Vercel em 2 cliques» em uma decisão binária?

Do texto: Antes de fazer o deploy, você precisa enviar o código para o GitHub. Se ainda não fez isso, é só criar um repositório novo no GitHub e seguir as instruções que ele mostra na tela — são 3 comandos git no terminal.

Continue explorando