guide2 min read

App Router Guide

Migrate from Pages Router to App Router. Server components, layouts, and loading states.

Next.js App Router (app/ directory) replaces Pages Router (pages/) with: React Server Components (default — render on server, zero client JS), nested layouts (shared UI across routes), loading.tsx (streaming loading states), error.tsx (error boundaries per route), and route groups (organize without affecting URL). Key change: components are server-side by default — add "use client" only for interactivity. Toolular uses App Router with static export for maximum performance.