Advanced Routing & UX 🧭

The App Router unlocks sophisticated UX—organize segments to deliver persistent layouts, modals, and seamless transitions.

Route Groups 🗂️

• (marketing) and (app) split sections without changing URLs.
• Apply unique layouts/styling per group.

Parallel Routes 🛤️

• Define slots like @feed, @modal to render multiple siblings.
• Great for dashboards (sidebar + content + activity feed) with independent loading states.

Intercepting Routes 🚪

• Use (.)modal or (..)modal folders to render a route inside another tree (modal overlay while preserving background).
• Perfect for detail views (e.g., /photos/[id]) opened atop gallery.

Persistent Layouts & State Retention 🧳

• Layouts preserve component state while navigating child routes (tabs, nav). Keep expensive components in layouts so they don’t remount.
• Use template.tsx if you need fresh instances per navigation.

Skeleton Strategies 🦴

• Combine Suspense boundaries per parallel route for targeted skeletons.
• loading.tsx in nested folders ensures just that segment shows placeholder.

Progressive Enhancement ⚙️

• All routing features degrade gracefully to standard links if JS disabled; ensure forms and nav work server-rendered first.
• Enhance with client components (modals, transitions) without breaking back/forward history.

Analogy: advanced routing is set design for a theater—you can reveal scenes (route groups), keep side stages active (parallel routes), and slide in spotlighted actors (intercepted modals) without rebuilding the entire stage.