App Router | Notion

Routing based on the app/ directory (file-system routing).

Core Concepts

Default to Server Components (RSC)
Opt-in to Client Components via "use client"
Built-in support for:
- Layouts (layout.tsx)
- Streaming (loading.tsx, React Suspense)
- Server Actions (form handling without API routes)

File-based Routing

File / Folder	Route
`app/page.tsx`	`/`
`app/about/page.tsx`	`/about`
`app/blog/[slug]/page.tsx`	`/blog/:slug` (dynamic route)
`app/@sidebar/layout.tsx`	Named parallel route segment
`app/page.tsx` + `layout.tsx`	Nested layout + page combo

page.tsx: Defines a route entry point
layout.tsx: Defines shared UI across pages in the folder

Server vs Client Components

	Server Component	Client Component
Default in App Router	Yes	No (opt-in)
Browser API access	No	Yes
React state/hooks	No	Yes
Requires `"use client”`	No	Yes

Add "use client" at the top of the file to enable client behavior

Layout System

layout.tsx: Persistent UI wrapper (e.g. <nav>, <footer>)
One per route segment (folder level)
Supports nesting, streaming, and error boundaries

// app/layout.tsx
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

Special Files

File	Purpose
`layout.tsx`	Shared layout for a route segment
`page.tsx`	Defines a routable page
`loading.tsx`	Suspense fallback for async content
`error.tsx`	Error boundary for the route segment
`not-found.tsx`	Custom 404 page for the route segment
`favicon.ico`	Site icon, placed under `app/`

Core Concepts

File-based Routing

Server vs Client Components

Layout System

Special Files

Key Features