O que são rotas paralelas e interceptoras?

Question

Accepted Answer

Estas são duas funcionalidades avançadas do App Router para layouts de interface sofisticados. Eles compartilham uma sintaxe de convenção de pasta. ## Por que isso importa Rotas paralelas permitem layouts multi-painel complexos, carregados independentemente (dashboards) de forma limpa; rotas interceptoras entregam o padrão "modal com uma URL real" (compartilhável, seguro para atualização, amigável ao botão voltar) que de outra forma seria complicado construir. São avançadas, mas resolvem problemas reais de UX — painéis independentes e sobreposições contextuais — que anteriormente exigiam trabalho significativo de roteamento/estado manual. ## Rotas Paralelas (@folder) — renderize múltiplas páginas em um layout Rotas paralelas permitem que um único layout **renderize múltiplos "slots" de rota independentes simultaneamente**, cada um com seu próprio estado de carregamento/erro. Você define slots com pastas `@name`: ```text app/ layout.tsx @team/page.tsx → a slot @analytics/page.tsx → another slot ``` ```tsx // app/layout.tsx — slots are passed as named props export default function Layout({ children, team, // ← @team slot analytics, // ← @analytics slot }: { children: React.ReactNode; team: React.ReactNode; analytics: React.ReactNode }) { return <>

{children} ; } ``` Cada slot navega e carrega **independentemente** — ótimo para **dashboards** onde painéis se atualizam separadamente, ou mostrando duas seções ao mesmo tempo. ## Rotas Interceptoras ((.)folder) — sobreponha uma rota sem deixar a página atual Rotas interceptoras permitem que você "capture" uma navegação e a renderize **no contexto atual** (por exemplo, um modal) em vez de uma página completa — enquanto ainda possui uma URL real e compartilhável. ```text app/feed/page.tsx app/feed/(..)photo/[id]/page.tsx → intercepts /photo/[id] when navigated from the feed app/photo/[id]/page.tsx → the full page (on direct visit / refresh) ``` ```text Click a photo in the feed → opens as a MODAL over the feed (intercepted), URL = /photo/123 Refresh or share that URL → renders the FULL photo page (no interception) ``` Os marcadores de interceptação (`(.)` mesmo nível, `(..)` um acima, `(...)` raiz) controlam qual segmento é interceptado. É exatamente assim que funciona o padrão estilo Instagram "foto abre em um modal mas tem sua própria URL".