Rotas, layouts e pastas privadas/públicas

layout.tsx — chrome que persiste entre navegações

Um layout.tsx envolve todas as rotas dentro da sua pasta e não remonta quando você navega entre elas — perfeito pra uma sidebar ou navbar que não deveria "piscar" a cada clique.

export default function DashboardLayout({ children }: { children: React.ReactNode }) {
  return (
    <div className="flex">
      <Sidebar />
      <main className="flex-1 p-6">{children}</main>
    </div>
  );
}

Grupos de rota — organizar sem afetar a URL

Uma pasta entre parênteses, tipo (auth), agrupa rotas e permite um layout compartilhado só pra elas — mas o nome do grupo não entra na URL.

app/
  (auth)/
    layout.tsx        → só se aplica às rotas abaixo
    login/
      page.tsx        → /login  (não /auth/login)
    cadastro/
      page.tsx        → /cadastro
  (dashboard)/
    layout.tsx        → sidebar + navbar autenticados
    relatorios/
      page.tsx        → /relatorios

É assim que uma aplicação separa "tela pública com layout de login" de "tela autenticada com sidebar" sem duplicar rota nenhuma — cada grupo tem seu próprio layout.tsx, e o Next.js decide qual usar pela pasta, não por uma configuração central de rotas.