Como Criar um Site Grátis com Vercel + Next.js

Dá pra colocar um site profissional no ar hoje, de graça, sem saber configurar servidor, sem pagar hospedagem, sem mexer com Apache nem Nginx. A Vercel faz tudo isso por você — e o plano gratuito é absurdamente generoso pra quem está começando.

Nesse tutorial você vai do zero ao site publicado na internet com domínio próprio ou o subdomínio gratuito da Vercel. Funciona pra portfólio, blog, landing page, site de empresa. Qualquer coisa.

Por que Vercel é a melhor opção gratuita para devs

Tem várias opções gratuitas de hospedagem: Netlify, GitHub Pages, Railway, Render. Mas a Vercel ganhou o mercado de frontend por um motivo simples — ela foi feita pelos criadores do Next.js. A integração é perfeita, os deploys são instantâneos e o free tier aguenta mais do que você imagina.

Pra comparar: contratar uma VPS básica na DigitalOcean custa uns R$ 30-40 por mês. Na Vercel você tem tudo isso de graça até escalar o suficiente pra precisar de mais. Pra maioria dos projetos pessoais e pequenos, o free tier aguenta anos.

O que você vai construir (preview do resultado final)

Ao final desse tutorial você vai ter: um site Next.js rodando em produção, acessível por uma URL pública, com SSL ativo, deploy automático configurado e — se quiser — seu domínio próprio apontando pra ele. O site vai carregar rápido, ter boa pontuação no Core Web Vitals e estar pronto pra receber visitantes.

O processo todo leva menos de 30 minutos na primeira vez. Da segunda em diante, um deploy novo leva menos de 2 minutos.

Passo 1: Escolhendo um template Next.js

Você tem duas opções aqui: cria do zero com npx create-next-app@latest ou usa um template pronto. Se o objetivo é ter o site no ar rápido, template é o caminho. O catálogo de templates da Vercel tem centenas de opções — portfólio, blog com MDX, landing page, e-commerce com Shopify.

Se preferir partir do zero, o comando npx create-next-app@latest meu-site --typescript --tailwind --app já cria um projeto Next.js com TypeScript e Tailwind configurados. É a base que eu uso pra quase tudo.

Passo 2: Personalizando no Cursor/VS Code

Depois do deploy inicial, clone o repositório que foi criado no GitHub. Se usou o fluxo da Vercel, o repo já está na sua conta. Clone com git clone e abra no seu editor.

As personalizações básicas que qualquer site precisa: trocar o título e descrição no layout.tsx, atualizar as cores no tailwind.config.ts, substituir textos de placeholder no conteúdo principal. Se você usa Cursor, pode descrever em linguagem natural o que quer mudar e ele faz.

Quando terminar as edições, commite e faça push: git add . && git commit -m 'Personalizações iniciais' && git push. A Vercel detecta o push automaticamente e faz um novo deploy. Em ~1 minuto o site já está atualizado.

Passo 3: Deploy na Vercel (3 cliques)

Se você ainda não conectou seu repositório à Vercel, o processo é simples. Entre em vercel.com, faça login com GitHub, clique em 'Add New Project', selecione o repositório e clique em 'Deploy'. Três cliques.

A Vercel detecta automaticamente que é um projeto Next.js e configura tudo. Build command, output directory, variáveis de ambiente padrão — tudo automático. Você não precisa configurar nada na maioria dos casos.

Passo 4: Domínio customizado (grátis ou R$40/ano)

O subdomínio .vercel.app funciona bem pra testes e projetos pessoais. Mas se você quer passar credibilidade — seja pra portfólio ou negócio — um domínio próprio faz diferença. Domínio .com.br custa em torno de R$ 40-50 por ano no Registro.br.

Próximos passos: adicionando blog, analytics e SEO

Site no ar é só o começo. Pra transformar esse site em algo que traz resultado, você precisa de três coisas: conteúdo (blog ou páginas), analytics pra entender o tráfego e SEO pra ranquear no Google.

Com o site no ar, o próximo passo é pensar em como monetizar. Se quer transformar esse site em fonte de renda, confira nosso guia completo em Como Monetizar um Site: 7 Formas que Funcionam em 2026. E se está pensando em qual tipo de site criar, a lista de 10 ideias de sites lucrativos pode ajudar a definir o foco.