Next.js App Router

Overview

The App Router (app/) is Next.js's modern routing system built on React Server Components. Folders define routes; special files like page.tsx, layout.tsx, and loading.tsx compose UI and data fetching per segment.

Syntax / Usage

app/
  layout.tsx          # Root layout
  page.tsx            # /
  blog/
    page.tsx          # /blog
    [slug]/
      page.tsx        # /blog/:slug
  (marketing)/
    about/page.tsx    # route group — no URL segment
  api/
    health/route.ts   # Route Handler

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

Examples

Nested layout sharing a header:

// app/dashboard/layout.tsx
export default function DashboardLayout({
  children,
}: { children: React.ReactNode }) {
  return (
    <div className="flex">
      <Sidebar />
      <main>{children}</main>
    </div>
  )
}

Parallel routes with @modal slots (advanced):

app/
  @modal/
    (.)photo/[id]/page.tsx
  photo/[id]/page.tsx

Common Mistakes

• Putting 'use client' at the root layout—keeps the whole tree client-side
• Confusing page.tsx (routable) with arbitrary components in app/
• Not awaiting params and searchParams in Next.js 15+
• Colocating non-route files without _ prefix or outside app/

See Also

routing server-components client-components metadata