Next.js na prática

Até agora foram peças soltas: HTML, CSS, JavaScript e componentes. Este módulo é onde elas viram um site com endereço.

E é o módulo mais satisfatório da trilha, porque no fim dele existe um link que você manda pra outra pessoa.

Este site aqui foi feito assim, com o que está escrito abaixo.

O que um framework resolve

React sozinho cuida de componentes e mais nada. Ele não sabe o que é uma página, não sabe o que é um endereço, não sabe como o Google vai ler o seu conteúdo.

Um framework é o conjunto de decisões já tomadas em cima disso. O Next.js é o mais usado no mercado brasileiro de produto, e resolve rotas, otimização de imagem, metadados e build sem você configurar nada.

O paralelo honesto: é um template de arquivo do Figma com páginas, grid e estilos já definidos. Você poderia montar tudo do zero. Aceitar as decisões de alguém economiza semanas e deixa o arquivo compreensível pra próxima pessoa.

Rota é pasta

Esta é a parte que costuma cair a ficha.

No Next.js, a estrutura de pastas é o mapa do site. Você não configura rota em lugar nenhum:

src/app/
  page.tsx                 ->  /
  glossario/
    page.tsx               ->  /glossario
    [slug]/
      page.tsx             ->  /glossario/flexbox
  guias/
    page.tsx               ->  /guias

Cada page.tsx é uma página. O nome da pasta é o endereço. E [slug] entre colchetes é o coringa: uma pasta só que atende todos os termos do glossário, cada um com o seu endereço próprio.

Isso é o sitemap que você desenha no começo de um projeto, existindo como estrutura de arquivos. Abrir a pasta app de um projeto Next é a forma mais rápida de entender o produto inteiro.

Layout é o master da página

src/app/
  layout.tsx     <- cabeçalho, rodapé, fontes, tudo que se repete
  page.tsx       <- só o conteúdo da home

O layout.tsx envolve todas as páginas abaixo dele. Cabeçalho, rodapé e navegação ficam ali e você não repete em lugar nenhum.

É o master component aplicado à página inteira. E como no Figma, dá pra ter layout dentro de layout: um geral pro site, outro só pra área de guias, por exemplo.

Server e client, sem drama

Este é o único conceito novo de verdade, e ele tem uma explicação curta.

Por padrão, os componentes do Next rodam no servidor: eles são transformados em HTML antes de chegar no navegador. Isso deixa a página rápida e faz o Google conseguir ler o conteúdo, que é o que importa pra um site que vive de busca.

Quando o componente precisa reagir ao usuário (clique, digitação, estado), ele precisa rodar no navegador. Aí você escreve uma linha no topo do arquivo:

"use client";

A regra prática: texto e conteúdo ficam no servidor, interação vira client. Neste site, as páginas de glossário são servidor, e a busca com filtro é client. São dois arquivos, e a divisão é exatamente essa.

Se você errar, o Next avisa com uma mensagem clara. Não é o tipo de coisa que quebra em silêncio.

Tailwind, que é CSS com apelido

A maioria dos projetos Next usa Tailwind, e ele assusta na primeira olhada:

<div className="flex items-center gap-4 rounded-2xl border p-6">

Mas leia de novo com o que você já sabe do módulo 2:

Não tem conceito novo. É o mesmo CSS com nome curto, escrito no lugar onde o elemento está em vez de num arquivo separado.

Designer costuma se dar bem com Tailwind por dois motivos. Primeiro, os números não são livres: gap-4, p-6, text-sm vêm de uma escala fechada, que é exatamente o que uma escala de espaçamento e uma escala tipográfica são. Segundo, você lê o componente inteiro sem pular de arquivo.

O preço é que a marcação fica poluída. É uma troca real, e vale saber que é uma troca.

Deploy, que é a parte que parece mágica

Deploy é colocar no ar. Hoje isso é:

1. o código vai pro GitHub com git
2. você conecta o repositório na Vercel uma vez
3. todo push na branch principal publica sozinho, em menos de um minuto

Não tem servidor pra configurar. E tem um efeito colateral que muda o seu trabalho: cada branch ganha um endereço de preview. Em vez de mandar print no Slack, você manda o link da coisa funcionando, com hover, foco, responsividade e teclado reais.

Print não tem estado de foco. O link tem.

O que você consegue fazer sozinha depois disto

Sendo honesto sobre o alcance: com este módulo você monta e publica um site de conteúdo, um portfólio, uma landing, uma documentação de design system. Tudo que é estrutura, conteúdo e estilo.

O que ainda não: banco de dados, autenticação, pagamento, integração pesada. Isso continua sendo trabalho de quem faz isso o dia inteiro, e tudo bem. A camada que você acabou de destravar é grande e é justamente a que estava emperrada em fila de backlog.

O que fazer hoje

Cria o projeto e vê ele rodando. São dois comandos:

npx create-next-app@latest meu-site

cd meu-site && npm run dev

Abre localhost:3000, acha o arquivo src/app/page.tsx, apaga tudo que tem dentro e escreve o seu nome. Salva. A página muda sozinha, sem recarregar.

Depois cria uma pasta sobre com um page.tsx dentro e acessa localhost:3000/sobre. Você acabou de criar uma rota sem configurar nada, e essa é a ideia inteira.

O último módulo é IA como copiloto, que é sobre como usar tudo isso sem escrever a maior parte na mão, e como revisar o que a IA devolve.