File-based Routing

The App Directory

Next.js uses the filesystem as the router. Files inside the app/ directory map directly to URL routes. A file at app/blog/page.tsx handles the /blog route.

Special Files

Next.js has reserved filenames: page.tsx (renders the route), layout.tsx (shared UI), loading.tsx (loading state), error.tsx (error boundary), and not-found.tsx.

Dynamic Routes

Wrap a folder name in square brackets for dynamic segments: app/posts/[id]/page.tsx. Access the id via the params prop passed to the page component.

Route Groups

Wrap folder names in parentheses to create route groups — they organize routes without affecting the URL structure.