Web Development
Como Criar um Site Grátis com Vercel e Next.js
Deploy em 5 minutos, domínio customizado, SSL automático e analytics — tudo de graça. Veja o passo a passo completo com Vercel e Next.js.
CrazyStack
12 min de leitura
compartilhar
Vercel
Carregando
Deploy em 5 minutos, domínio customizado, SSL automático e analytics — tudo de graça. Veja o passo a passo completo com Vercel e Next.js.
Como Criar um Site Grátis com Vercel e Next.js. Deploy em 5 minutos, domínio customizado, SSL automático e analytics — tudo de graça. Veja o passo a passo completo com Vercel e Next.js.
Criou um site de graça? Veja 7 formas de monetizar sem investir — com exemplos e valores reais.
Do planejamento ao primeiro real — guia com timeline realista para sites de nicho.
Vercel é a empresa por trás do Next.js. Eles criaram o framework e a plataforma de deploy juntos, o que significa que a integração entre os dois é praticamente perfeita. Mas por que oferecem plano gratuito tão generoso?
Simples assim: o plano Hobby é a isca. A Vercel quer que você construa seu projeto lá, cresça, e eventualmente pague pelo Pro quando precisar de mais recursos. É um modelo freemium clássico — e honesto.
O plano gratuito inclui: deploy ilimitado de projetos pessoais, SSL automático em todos os domínios, CDN global com edge nodes em dezenas de países, 100GB de bandwidth por mês, e integração nativa com GitHub, GitLab e Bitbucket. Dá pra rodar um blog, portfólio, landing page ou site de nicho tranquilamente.
Uma coisa importante: o plano Hobby é para uso pessoal e não-comercial. Se você vai usar para um negócio gerando receita, tecnicamente precisa do Pro ($20/mês). Na prática, muita gente usa o Hobby para monetizar conteúdo — mas é bom saber das regras.
**Projetos**: ilimitados. **Bandwidth**: 100GB/mês. **SSL**: automático. **Deploy automático**: push no GitHub = site atualizado. **Preview deploys**: cada PR gera uma URL de preview. **Analytics básico**: incluso desde 2024. **Serverless Functions**: 100k invocações/mês.
Olha só — 5 minutos é real, não clickbait. Se você já tem Node.js instalado e uma conta no GitHub, é literalmente isso. Vou mostrar cada passo.
Abre o terminal e roda isso:
npx create-next-app@latest meu-site
O CLI vai fazer algumas perguntas. Para um site simples, responda: TypeScript? Sim. ESLint? Sim. Tailwind CSS? Sim (vai facilitar muito a estilização). src/ directory? Sim. App Router? Sim. Customizar import alias? Não.
Depois de instalar, entra na pasta: cd meu-site. Roda o dev server: npm run dev. Abre o navegador em localhost:3000 — o site já está funcionando.
Edita o arquivo src/app/page.tsx para colocar seu conteúdo. Pode deletar tudo dentro do return e colocar um HTML simples. Tailwind já está configurado, então classes como className="text-4xl font-bold" já funcionam.
Com o projeto criado, vai no GitHub e cria um repositório novo. Depois volta no terminal:
git init — inicializa o git (create-next-app já faz isso automaticamente). git remote add origin URL_DO_SEU_REPO — conecta ao GitHub. git push -u origin main — envia o código.
Pronto. Código no GitHub. Agora a parte mais legal.
Vai em vercel.com, cria uma conta gratuita com seu GitHub. Clica em "Add New Project". Seleciona o repositório que você acabou de criar. A Vercel detecta automaticamente que é Next.js e configura tudo — você não precisa mexer em nada.
Clica em "Deploy". Em menos de 2 minutos, seu site está no ar em uma URL do tipo meu-site-xyz.vercel.app. SSL automático, CDN global. De graça.
A partir de agora, cada push no branch main atualiza o site automaticamente. Cada PR abre em um subdomínio de preview. Isso é o que grandes empresas usam — e você tem acesso grátis.
A Vercel dá o subdomínio vercel.app de graça. Mas para ter meusite.com.br, você precisa comprar o domínio — isso não tem jeito de ser grátis (registros de domínio têm custo real).
O que a Vercel oferece: SSL automático para qualquer domínio que você conectar, configuração em menos de 5 minutos com instruções claras, e suporte a múltiplos domínios por projeto — tudo sem custo adicional.
Para conectar um domínio: no dashboard da Vercel, entra no projeto, vai em Settings → Domains, adiciona o domínio. A Vercel mostra exatamente quais registros DNS você precisa adicionar no seu provedor de domínio.
Quanto custa um domínio? Um .com sai em torno de R$70-90/ano no Registro.br ou provedores internacionais como Namecheap. Um .com.br custa R$40/ano no Registro.br. Para um site que você planeja monetizar, esse custo é irrisório — mas se ainda não quer gastar nada, o .vercel.app funciona perfeitamente.
Dica real: se você está criando um site de nicho para SEO e monetização (veja o artigo <a href="/2026/site-de-nicho-renda-passiva">Como Criar um Site de Nicho para Renda Passiva</a>), invista no domínio. O subdomínio vercel.app raramente ranqueia bem no Google.
Vercel Analytics foi adicionado ao plano gratuito em 2024. Ele mostra visitantes únicos, page views, performance (Core Web Vitals) e países de origem. Para a maioria dos sites iniciantes, é tudo que você precisa.
Para ativar: instala o pacote npm install @vercel/analytics. No arquivo src/app/layout.tsx, importa e adiciona o componente Analytics:
import { Analytics } from '@vercel/analytics/react' — depois adiciona <Analytics /> dentro do body do layout. Commitou, fez push, está funcionando.
Se quiser algo mais completo de graça: Google Analytics 4 ainda é a referência para analytics gratuito. Cria uma conta no GA4, pega o Measurement ID (G-XXXXXXX) e adiciona via Google Tag Manager ou diretamente no código.
Outra opção open-source: Umami. Você faz self-host no Railway (tem plano grátis) ou Supabase e tem analytics sem enviar dados para o Google. Boa opção se privacidade importa para o seu público.
Honestidade aqui: o plano Hobby da Vercel tem limitações reais que você precisa conhecer antes de ter surpresas.
Uso pessoal e não-comercial: os termos de serviço dizem que o Hobby é para projetos pessoais. Sites gerando receita comercial tecnicamente precisam do Pro. Muita gente ignora isso nos primeiros meses — mas se o site crescer, migre.
100GB de bandwidth: parece muito, mas se você tiver imagens grandes ou tráfego alto, chega. Um site com 50k visitas mensais e páginas de 2MB pode usar uns 100GB.
Serverless Functions: timeout de 10 segundos (Pro tem 15s), 100k invocações/mês, 1MB de payload. Para APIs pesadas, pode ser um problema.
Build minutes: 100 horas de build por mês. Pra site pessoal, nunca vai chegar perto. Pra múltiplos projetos com deploys frequentes, pode virar limitação.
Suporte: sem suporte prioritário. Issues vão para o fórum e comunidade. Se você tem SLA para cumprir, precisa do Pro.
Sites e-commerce com transações reais precisam do plano Pro ou Enterprise. O plano Hobby não é para uso comercial conforme os termos da Vercel.
Galera, a maioria dos sites pessoais nunca vai precisar do plano Pro. Mas existem sinais claros de quando o upgrade faz sentido.
Hora de upgradar: você está gerando receita real com o site. Você ultrapassou 100GB de bandwidth consistentemente. Você tem múltiplos projetos de equipe. Você precisa de proteção de senha para preview URLs. Você tem APIs com timeout maior que 10s.
Fique no Hobby se: é um portfólio pessoal. É um blog que ainda está crescendo. É um site de nicho nos primeiros meses (menos de 20k visitas/mês). É um projeto experimental.
O Pro custa $20/mês por usuário. Para um site gerando receita — por exemplo, via AdSense ou afiliados (leia mais em <a href="/2026/monetizar-site-gratuito-2026">7 Formas de Monetizar um Site Gratuito</a>) — esse custo é facilmente recuperado com algumas centenas de visitas diárias.
Se o custo ainda preocupa, alternativas como Cloudflare Pages (free tier extremamente generoso), Netlify (free tier similar ao Vercel) e Railway (para projetos full-stack) são opções sólidas. Cada uma tem suas próprias limitações com Next.js, mas valem a consideração.
Quer o setup zero custo completo? Next.js + Vercel (deploy e CDN) + GitHub (código) + Vercel Analytics (métricas) + Cloudflare (DNS gratuito com proteção DDoS) + Google Search Console (SEO). Isso é tudo que você precisa para lançar, crescer e eventualmente monetizar — sem gastar um centavo até o site estar dando dinheiro.
Quer ver como isso vira renda? O artigo <a href="/2026/site-de-nicho-renda-passiva">Como Criar um Site de Nicho para Renda Passiva</a> mostra o caminho completo — do nicho ao primeiro real, com timeline de 12 meses.