App Router

The App Router uses folders inside app/ to create routes. A folder becomes a URL segment, and a page.tsx file inside it is what shows on that URL. layout.tsx wraps pages and stays on screen between navigations. Components are Server Components by default; add "use client" when you need state or events.

app/
  layout.tsx        -> wraps every page
  page.tsx          -> /
  about/
    page.tsx        -> /about
  blog/
    page.tsx        -> /blog
    [slug]/
      page.tsx      -> /blog/my-post

// app/about/page.tsx
export default function AboutPage() {
  return <h1>About</h1>
}