Tutoriais
Como Criar um Site Grátis com Next.js e Vercel
Next.js + Vercel é a combinação mais poderosa pra criar um site grátis, rápido e profissional. Aqui vai o tutorial do zero ao deploy.
DevDoido
14 min de leitura
compartilhar
Next.js
Carregando
Next.js + Vercel é a combinação mais poderosa pra criar um site grátis, rápido e profissional. Aqui vai o tutorial do zero ao deploy.
Como Criar um Site Grátis com Next.js e Vercel. Next.js + Vercel é a combinação mais poderosa pra criar um site grátis, rápido e profissional. Aqui vai o tutorial do zero ao deploy.
Tem muita opção por aí pra criar site grátis — WordPress, Wix, Squarespace. Mas nenhuma delas chega perto do Next.js + Vercel quando você quer performance real, controle total e custo zero. O Next.js é mantido pela própria Vercel, então a integração entre os dois é perfeita. Deploy automático a cada push no GitHub, HTTPS grátis, CDN global, e você ainda controla cada linha de código.
A experiência de desenvolvimento (DX) do Next.js em 2026 está absurda. App Router estável, Server Components funcionando de verdade, Cache Components com PPR, e uma comunidade gigante. Se você sabe JavaScript, você consegue criar um site bonito e rápido em poucas horas. Sem taxa de plataforma, sem lock-in proprietário, sem limite de customização.
Pra SEO, o Next.js é imbatível no ecossistema JavaScript. Renderização no servidor por padrão, Metadata API declarativa, sitemap automático, e Core Web Vitals já otimizados. Google adora sites rápidos, e o Next.js entrega isso sem você precisar fazer muita coisa extra. Compare com um blog no Wix que carrega em 4 segundos — não tem competição.
Abre o terminal e roda: `npx create-next-app@latest meu-site`. O CLI vai perguntar algumas coisas. Responde assim: TypeScript? Sim. ESLint? Sim. Tailwind CSS? Sim. App Router? Sim. Turbopack? Sim (vale a velocidade no dev). Com essas opções, você já tem um projeto moderno e pronto pra produção. Demora uns 30 segundos pra instalar tudo.
Depois de instalar, entra na pasta com `cd meu-site` e roda `npm run dev`. Vai abrir `localhost:3000` com a página inicial padrão do Next.js. Já tá funcionando. Agora é só customizar. Esse processo todo leva menos de 2 minutos do zero — isso é a beleza do `create-next-app`.
Com App Router, a estrutura é bem intuitiva. Tudo dentro de `src/app/` vira rota automaticamente. O arquivo `page.tsx` é a página em si. O `layout.tsx` é o wrapper global com header e footer. O `globals.css` tem os estilos base. A pasta `public/` guarda imagens e arquivos estáticos. E `src/components/` é onde você bota seus componentes reutilizáveis.
Pra criar uma rota nova, basta criar uma pasta. Quer `/sobre`? Cria `src/app/sobre/page.tsx`. Quer `/blog/meu-post`? Cria `src/app/blog/meu-post/page.tsx`. Simples assim. O App Router elimina toda aquela configuração de roteamento que você tinha que fazer antes com React Router.
TypeScript. Sem discussão. Sei que parece mais trabalho no começo, mas em 2026 não tem mais justificativa pra novo projeto em JavaScript puro. O Next.js foi feito pra TypeScript, os tipos já vêm configurados, e a autocomplete no VSCode vai te salvar horas de debugar erro bobo. Se você não conhece TypeScript, aprende as noções básicas e usa — você não precisa ser expert pra fazer um site simples.
A home page é o `src/app/page.tsx`. Aqui você cria a estrutura principal do site: hero section com título e chamada pra ação, seção de features ou serviços, prova social se tiver, e um CTA final. Mantém simples — site bom não precisa de animação em tudo. Um hero limpo com texto claro converte melhor que 10 seções animadas que demoram pra carregar.
Uma estrutura que funciona: `<Header />` no layout, hero com headline principal + subtítulo + botão, seção 'Sobre mim' ou 'Serviços', e footer. Com Tailwind, você estiliza tudo inline e responsivo. Pra inspiração, usa o shadcn/ui que tem componentes prontos e gratuitos. Copia o que precisar e adapta pro seu conteúdo.
A página Sobre é simples: `src/app/sobre/page.tsx`. Conteúdo estático, sem banco de dados, sem complexidade. Escreve quem você é, o que você faz, talvez uma foto, e links pro seu trabalho. Server Component por padrão, então é renderizado no servidor e super rápido. Essa página não precisa de nenhum JavaScript no cliente.
Pra blog, você tem duas opções: MDX ou JSON. MDX é a abordagem clássica — você escreve posts em Markdown com componentes React dentro. Cria `src/app/blog/[slug]/page.tsx` com `generateStaticParams` pra gerar todas as páginas estaticamente no build. É rápido, SEO perfeito, e você não precisa de banco de dados. A outra opção é JSON — cada post vira um arquivo JSON com título, conteúdo e metadata. Mais verboso, mas mais fácil de gerar via script ou IA.
Formulário de contato com Server Actions do Next.js é perfeito pra isso. Cria `src/app/contato/page.tsx` com um formulário simples (nome, email, mensagem) e um Server Action que envia o email. Pra envio de email, o Resend tem tier gratuito de 3.000 emails/mês — mais que suficiente. Sem backend separado, sem API route extra, tudo dentro do Next.js.
Se você escolheu Tailwind no `create-next-app`, já tá configurado. Não precisa fazer mais nada. O arquivo `tailwind.config.ts` já aponta pro seu diretório `src/`, o `globals.css` já tem as diretivas `@tailwind base/components/utilities`. Só começa a usar as classes. Se não escolheu, roda `npm install -D tailwindcss postcss autoprefixer` e `npx tailwindcss init -p`.
A curva de aprendizado do Tailwind parece íngreme no começo mas é enganosa. Em um dia você já tá produtivo. A lógica é simples: cada classe CSS virou um nome curto. `flex items-center justify-between` substitui 3 linhas de CSS. `text-2xl font-bold text-gray-900` substitui mais 3. Depois que você pega o jeito, nunca mais quer voltar pro CSS manual.
Tailwind usa prefixos de breakpoint: `sm:`, `md:`, `lg:`, `xl:`. Você define o estilo mobile primeiro, e adiciona os prefixos pra telas maiores. Exemplo: `className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3'` — uma coluna no celular, duas no tablet, três no desktop. Responsivo sem media query manual. A maioria dos layouts que você precisa pra um site pessoal fica pronto em menos de uma hora.
Tailwind tem suporte a dark mode nativo. Configura `darkMode: 'class'` no `tailwind.config.ts`, adiciona a classe `dark` no `<html>` quando o usuário trocar o tema, e usa o prefixo `dark:` nas classes. Tipo: `className='bg-white dark:bg-gray-900 text-gray-900 dark:text-white'`. Com `next-themes`, você gerencia o tema em 3 linhas de código. Sem biblioteca pesada, sem CSS variável complicado.
O Next.js tem uma API declarativa pra metadata que é muito boa. No `layout.tsx` ou `page.tsx`, você exporta um objeto `metadata` ou usa `generateMetadata` pra metadata dinâmica. Inclui title, description, OpenGraph, Twitter Card, robots, canonical — tudo. O Next.js injeta tudo no `<head>` automaticamente, na ordem certa, sem duplicar tags. Você escreve o objeto, o framework cuida do resto.
Cria `src/app/sitemap.ts` e exporta uma função que retorna um array de URLs. O Next.js gera o `/sitemap.xml` automaticamente no build. Pra blog com muitos posts, você gera o array lendo os arquivos MDX ou JSONs da pasta de posts. Simples, automático, e o Google indexa todas as páginas sem você ter que submeter uma por uma no Search Console.
O Next.js otimiza várias coisas por padrão que afetam diretamente os Core Web Vitals. O componente `<Image>` faz lazy loading, redimensionamento automático e serve WebP. As fontes carregam sem layout shift com `next/font`. O código é dividido por rota automaticamente (code splitting), então o usuário só baixa o JavaScript da página atual. Com Server Components, a maior parte do JavaScript sequer vai pro cliente. Você começa com nota alta no PageSpeed sem ter que fazer nada especial.
Primeiro, sobe o projeto pro GitHub. Se ainda não tem conta, cria uma — é grátis. No repositório, commit o código todo. Depois, vai em vercel.com, cria conta (pode usar o GitHub pra login), clica em 'Add New Project', e conecta ao repositório que você criou. A Vercel detecta automaticamente que é um projeto Next.js e configura tudo sozinha. Você não precisa mexer em nada.
Depois de conectar, cada `git push` na branch `main` dispara um deploy automático. A Vercel faz o build, otimiza os assets, e coloca no ar em menos de 2 minutos na maioria dos projetos. Pra branches de feature, ela cria URLs de preview automáticas — cada PR tem sua própria URL pra você testar antes de mergear. Isso é profissional de verdade, mesmo no tier gratuito.
No tier gratuito, o site fica em `meu-projeto.vercel.app`. Se quiser um domínio próprio tipo `meusite.com.br`, compra o domínio no Registro.br (R$40/ano pra `.com.br`) ou no Namecheap/GoDaddy pra `.com`. Depois é só adicionar o domínio nas configurações da Vercel e apontar os DNS. O processo todo leva 15 minutos e o HTTPS é configurado automaticamente. Domínio próprio passa muito mais credibilidade.
O Hobby plan da Vercel é generoso demais pra projetos pessoais. Você tem 100 GB de bandwidth por mês — pra um site novo, vai levar muito tempo pra ultrapassar isso. São 6.000 minutos de build por mês, o que significa centenas de deploys. Serverless Functions com 100 GB-horas de execução. Edge Functions ilimitadas. Certificado SSL automático. CDN global com presença em dezenas de países.
O que não tá incluso no free tier: times (é pessoal ou máx 1 colaborador), analytics avançado, Web Analytics ilimitado, e suporte prioritário. Mas pra site pessoal, portfólio ou blog, o tier gratuito é suficiente pra anos. A maioria dos projetos pessoais nunca vai precisar pagar nada na Vercel. Se você um dia precisar, é sinal de que seu site cresceu o suficiente pra justificar o gasto.
Um detalhe importante: o tier gratuito da Vercel exige que o projeto seja público ou você aceite os termos de uso comercial se for um produto pago. Pra uso pessoal, portfólio ou projeto open source, tá 100% liberado. Se for um SaaS ou site de negócios com receita, você precisa do Pro plan. Mas pra começar e testar, o Hobby plan te leva longe sem gastar um centavo.
Quando usar cada um