How does file-based routing work in Next.js?

app/
├── page.tsx              → /
├── about/
│   └── page.tsx          → /about
├── blog/
│   ├── page.tsx          → /blog
│   └── [slug]/
│       └── page.tsx      → /blog/:slug
├── (marketing)/
│   ├── pricing/
│   │   └── page.tsx      → /pricing
│   └── features/
│       └── page.tsx      → /features
└── api/
    └── users/
        └── route.ts      → /api/users

page.tsx      - Route UI
layout.tsx    - Shared layout
loading.tsx   - Loading UI
error.tsx     - Error UI
not-found.tsx - 404 page

// app/blog/[slug]/page.tsx
export default function BlogPost({ params }: { params: { slug: string } }) {
  return <h1>Post: {params.slug}</h1>;
}

// Catch-all: app/docs/[...slug]/page.tsx
// Matches /docs/a, /docs/a/b, /docs/a/b/c

// (marketing) doesn't affect URL
app/(marketing)/about/page.tsx → /about
app/(shop)/products/page.tsx   → /products