Next.js App Router

Next.js App Router

Priority: P0 (CRITICAL)

Use the App Router (app/ directory) for all new projects.

File Conventions

• page.tsx: The UI for a route.
• layout.tsx: Shared UI wrapping children. Persists across navigation.
• template.tsx: Similar to layout, but remounts on navigation.
• loading.tsx: Suspense boundary for loading states.
• error.tsx: Error boundary (Must be Client Component).
• not-found.tsx: Custom 404 UI.
• route.ts: Server-side API endpoint.

Structure Patterns

• Route Groups: Use parenthesis (auth) to organize routes without affecting URL path.
  • app/(auth)/​login/​page.tsx -> /​login
• Private Folders: Use underscore _lib to exclude folders from routing.
• Dynamic Routes: Use brackets [slug].
  • app/​blog/[slug]/​page.tsx -> /​blog/​abc
• Catch-all: [...slug] matches subsequent segments.

Navigation

• Link Component: Use <Link href="/​dashboard"> for prefetching.
• Programmatic: Use useRouter hook (Client Components only).
  • router.push('/​dashboard')
• Redirect: Use redirect('/​login') in Server Components.

Best Practices

• Colocation: Keep component files, styles, and tests inside the route folder.
• Layouts: Use Root Layout (app/​layout.tsx) for <html> and <body> tags.