Next.js: o que é, App Router na prática

React sozinho não decide como uma URL vira uma tela, nem onde o código roda (servidor ou navegador) — ele só renderiza componentes. O Next.js resolve exatamente essas duas perguntas, e o App Router (a pasta app/) é como ele faz isso hoje: a estrutura de pastas é o roteamento.

Pasta vira rota

app/
  page.tsx           → /
  sobre/
    page.tsx          → /sobre
  produtos/
    page.tsx          → /produtos
    [id]/
      page.tsx        → /produtos/123  (id é dinâmico)
  layout.tsx           → chrome compartilhado por tudo dentro de app/

Um arquivo page.tsx é o que torna uma pasta uma rota de verdade — uma pasta sem page.tsx não vira URL nenhuma (útil pra organizar código sem criar rota, ou pra agrupar rotas com um layout comum sem aparecer na URL, usando (nome-do-grupo)).

O componente de uma rota

type Props = { params: Promise<{ id: string }> };

export default async function ProdutoPage({ params }: Props) {
  const { id } = await params;
  return <h1>Produto {id}</h1>;
}

Repare que o componente é async e params vem como Promise — é assim no Next.js 15+: toda rota é potencialmente assíncrona por padrão, porque ela pode buscar dado antes de renderizar (próxima lição).