App Router

Next.js · Reference cheat sheet

📋 Overview

The App Router uses the app/ directory for routes, layouts, loading UI, and nested segments. Folders define URL segments; special files define UI and behavior.

🔧 Core concepts

💡 Examples

Nested layout:

app/
  layout.tsx
  page.tsx          → /
  blog/
    layout.tsx
    page.tsx        → /blog
    [slug]/
      page.tsx      → /blog/:slug

Dynamic page:

// app/blog/[slug]/page.tsx
export default async function Post({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  return <h1>{slug}</h1>;
}

Route group (no URL impact):

app/(marketing)/about/page.tsx  → /about
app/(shop)/cart/page.tsx        → /cart

⚠️ Pitfalls

• layout.tsx does not remount on soft navigation — don't put one-shot client state there expecting reset.
• params and searchParams are async in recent Next.js — await them.
• A folder without page.tsx is not a reachable route by itself.

🔗 Related

• pages_router.md
• server_components.md
• route_handlers.md
• link_navigation.md
• getting_started.md