Next.js app-router critical
Routing & File Conventions
App Router file conventions including layouts, loading states, error boundaries, route groups, parallel routes, intercepting routes, and dynamic segments.
- Difficulty
- intermediate
- Read time
- 1 min read
- Version
- v1.0.0
- Confidence
- established
- Last updated
Quick Reference
Use layout.tsx for persistent UI (nav, sidebar), loading.tsx for Suspense fallbacks, error.tsx (must be 'use client') for error boundaries. Route groups (folder) organize without affecting URL. Parallel routes @slot for independent sections. Intercepting routes (.) for modals. Use generateStaticParams for static dynamic routes.
Use When
- Setting up App Router file structure
- Creating layouts and nested routes
- Implementing loading and error states
- Building modal patterns with intercepting routes
Skip When
- Using Pages Router (pages/ directory)
- Simple single-page applications
Routing & File Conventions
App Router file conventions including layouts, loading states, error boundaries, route groups, parallel routes, intercepting routes, and dynamic segments.