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:

# Criar o projeto (troque 'meu-site' pelo nome que quiser)
npx create-next-app@latest meu-site

# O CLI vai perguntar:
# Would you like to use TypeScript? › Yes
# Would you like to use ESLint? › Yes
# Would you like to use Tailwind CSS? › Yes
# Would you like to use `src/` directory? › Yes
# Would you like to use App Router? › Yes
# Would you like to customize the import alias? › No

# Entrar na pasta do projeto
cd meu-site

# Rodar o servidor local
npm run dev

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:

// src/app/page.tsx — sua página inicial
export default function Home() {
  return (
    <main className="min-h-screen bg-zinc-950 text-white">
      {/* Hero section */}
      <section className="flex flex-col items-center justify-center min-h-screen px-4 text-center">
        <span className="text-lime-400 text-sm font-medium tracking-widest uppercase mb-4">
          Bem-vindo
        </span>
        <h1 className="text-5xl md:text-7xl font-bold mb-6">
          Meu Site
          <span className="text-lime-400"> Profissional</span>
        </h1>
        <p className="text-zinc-400 text-xl max-w-2xl mb-10">
          Descreve aqui o que você faz ou o que é o seu projeto.
          Seja direto e mostre valor desde o primeiro parágrafo.
        </p>
        <a
          href="/contato/"
          className="bg-lime-500 text-black font-bold px-8 py-4 rounded-lg hover:bg-lime-400 transition-colors"
        >
          Entre em contato
        </a>
      </section>

      {/* Seção sobre */}
      <section className="max-w-4xl mx-auto px-4 py-24">
        <h2 className="text-3xl font-bold mb-6">Sobre mim</h2>
        <p className="text-zinc-400 text-lg leading-relaxed">
          Coloca aqui um parágrafo curto e direto sobre quem você é.
          Sem blá blá blá — só o que interessa pra quem leu até aqui.
        </p>
      </section>
    </main>
  )
}

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