Next.js para Iniciantes: Crie Seu Primeiro

O que é Next.js (explicação sem jargão)

Next.js é um framework pra construir sites e aplicações web. Ele roda em cima do React, que é a biblioteca JavaScript mais popular do mundo. Mas calma — você não precisa saber React profundamente pra começar com Next.js.

Pensa assim: React sozinho é como ter tijolos. Você consegue construir qualquer coisa, mas precisa decidir como organizar cada parte. Next.js é como ter os tijolos mais a planta da casa. Ele já define onde ficam as páginas, como navegar entre elas, como otimizar performance. Você só se preocupa com o conteúdo.

Em 2026, Next.js é usado por empresas como TikTok, Twitch, Nike, e milhares de startups. Não é uma tecnologia experimental — é o padrão da indústria pra sites modernos.

Por que Next.js e não HTML puro?

HTML puro funciona. Pra um site de 3 páginas sem interatividade, pode até ser a melhor opção. Mas no momento que você precisa de menu de navegação consistente, SEO otimizado, loading rápido com code splitting, ou qualquer funcionalidade dinâmica, HTML puro vira uma dor de cabeça. Next.js resolve tudo isso de fábrica.

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

Só duas coisas: Node.js e um editor de código. Se você não tem nenhum dos dois, não se preocupe. Vou te guiar na instalação.

Setup em 5 minutos: criando o projeto

Abre o terminal e digita o comando abaixo. Ele vai criar uma pasta com tudo que você precisa — React, Next.js, Tailwind CSS, TypeScript, estrutura de pastas. Tudo automático.

O comando é: npx create-next-app@latest meu-site. Quando ele perguntar as opções, aceite os padrões que ele sugerir (TypeScript sim, Tailwind sim, App Router sim, src directory sim). São as configurações que a maioria dos projetos profissionais usa.

Depois que terminar (demora uns 30 segundos), entra na pasta do projeto com 'cd meu-site' e roda 'npm run dev'. Abre o navegador em localhost:3000 e pronto — seu site já tá rodando. É aquela página padrão do Next.js com o logo e uns links.

Entendendo o que o comando criou

Não precisa decorar nada. Só entenda o conceito: o Next.js criou uma pasta com arquivos de configuração (que você raramente mexe) e uma pasta src/app onde fica tudo que importa — suas páginas, layouts e estilos.

Estrutura de pastas explicada (sem complicar)

Dentro de src/app você vai ver alguns arquivos. Os dois mais importantes são: layout.tsx e page.tsx. O layout.tsx é o 'esqueleto' que envolve todas as páginas (menu, footer, etc). O page.tsx é o conteúdo da página inicial.

Todos os outros arquivos (tsconfig, package.json, postcss.config) são configuração técnica. Eles já vieram configurados pelo create-next-app. Você provavelmente nunca vai precisar mexer neles pra um site simples.

Criando sua primeira página

Abre o arquivo src/app/page.tsx no VS Code. Apaga tudo que tá lá e cola isso: uma função que retorna HTML simples. No Next.js, cada página é uma função que retorna o que você quer mostrar na tela.

Escreva algo como: export default function Home() { return ( <main> <h1>Meu Primeiro Site</h1> <p>Eu criei isso com Next.js em menos de 1 hora.</p> </main> ) }. Salva o arquivo e olha o navegador — a página atualiza automaticamente. Isso é hot reload, e é uma das melhores features do Next.js durante o desenvolvimento.

Criando a página Sobre

No App Router do Next.js, criar uma nova página é criar uma pasta nova. Quer uma página /sobre? Cria a pasta src/app/sobre e dentro dela um arquivo page.tsx. O Next.js automaticamente entende que essa pasta é uma rota.

Dentro do page.tsx da pasta sobre, faz a mesma coisa: uma função que retorna o conteúdo da página. Pode ser um texto simples sobre você, seu projeto, o que quiser. Salva, e acessa localhost:3000/sobre no navegador. Tá lá.

Criando a página Contato

Mesmo processo: cria src/app/contato/page.tsx. Pro contato, coloca seu email, links pra redes sociais, ou um formulário simples. Por enquanto, só texto tá ótimo. O formulário funcional a gente faz depois.

Adicionando navegação entre páginas

Agora que você tem 3 páginas, precisa de um menu pra navegar entre elas. Isso vai no layout.tsx, porque o layout envolve todas as páginas. No Next.js, você usa o componente Link (importa de 'next/link') em vez de tags <a> comuns. O Link faz navegação sem recarregar a página inteira — mais rápido e mais suave.

Abre o layout.tsx e adiciona uma nav com três Links: Home (/), Sobre (/sobre), Contato (/contato). Salva e pronto — agora dá pra navegar entre as páginas clicando no menu. Percebe como a transição é instantânea? Isso é o Next.js fazendo client-side navigation.

Estilizando com Tailwind CSS

Tailwind CSS já vem instalado e configurado. Você estiliza colocando classes direto no HTML. Não precisa criar arquivos CSS separados, não precisa inventar nomes de classe. É a forma mais rápida de estilizar que eu já usei.

Por exemplo: <h1 className="text-4xl font-bold text-blue-600">Meu Site</h1>. Isso faz o título ficar grande, bold e azul. Sem escrever uma linha de CSS. Cada classe faz uma coisa, e você combina quantas quiser.

Dá pra aprender Tailwind em 15 minutos olhando a documentação em tailwindcss.com/docs. Mas na prática, o jeito mais rápido é ir testando classes e ver o resultado no navegador em tempo real.

Adicionando imagens e fontes

Pra imagens, o Next.js tem o componente Image (importa de 'next/image'). Ele otimiza as imagens automaticamente: comprime, converte pra WebP, faz lazy loading, e serve no tamanho certo pra cada tela. É muito melhor do que usar a tag <img> do HTML.

Coloca suas imagens na pasta public/ e referencia como src="/nome-da-imagem.jpg". Não esqueça de definir width e height no componente Image — isso evita layout shift (aquele pulo chato quando a imagem carrega).

Fontes personalizadas

O Next.js tem integração nativa com Google Fonts via next/font. Importa a fonte que quer, aplica na tag body do layout, e pronto. A fonte é baixada em build time, não em runtime, então não afeta a performance. Nada de flash de fonte errada (FOUT).

Deploy grátis na Vercel

Essa é a parte mais satisfatória. Seu site vai do localhost pra internet em menos de 5 minutos. Aqui vai o passo a passo.

O que acontece depois de cada git push

A partir de agora, toda vez que você fizer uma mudança no código e mandar um git push, a Vercel automaticamente faz um novo deploy. Sem você fazer nada. Editou o texto da home? Push. 30 segundos depois, o site atualizado tá no ar.

Se você abrir um pull request no GitHub, a Vercel cria um preview deploy com uma URL única pra aquela branch. Dá pra mandar esse link pra alguém revisar antes de publicar. Fluxo profissional, de graça.

Próximos passos: o que estudar depois

Você acabou de criar e publicar um site. Isso já te coloca à frente de muita gente que fica eternamente no "vou começar semana que vem". Agora o caminho natural depende do que você quer fazer com esse site.

O mais importante agora é não ficar preso no tutorial. Seu site tá no ar, funcionando, acessível pra qualquer pessoa no mundo. Mexe nele. Quebra coisas. Conserta. É assim que se aprende de verdade.