Next.js

app/
├── layout.tsx          # Root layout (wraps all pages)
├── page.tsx            # / route
├── loading.tsx         # Suspense fallback
├── error.tsx           # Error boundary
├── not-found.tsx       # 404 page
├── (marketing)/        # Route group (no URL segment)
│   └── about/
│       └── page.tsx    # /about
├── blog/
│   ├── page.tsx        # /blog
│   └── [slug]/
│       └── page.tsx    # /blog/:slug
└── api/
    └── users/
        └── route.ts    # API route: GET/POST /api/users

// Server Component (default — runs on server, 0 JS sent)
export default async function UserList() {
  const users = await db.users.findMany(); // Direct DB access!
  return (
    <ul>
      {users.map(u => <li key={u.id}>{u.name}</li>)}
    </ul>
  );
}

// Client Component (needs interactivity)
"use client";
import { useState } from "react";

export function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(c => c+1)}>{count}</button>;
}

// Pattern: server parent, client leaf
// UserList (server) → renders <Counter /> (client)

// Static (cached at build time)
const data = await fetch("https://api.example.com/posts");

// Revalidate every 60 seconds
const data = await fetch("https://api.example.com/posts", {
  next: { revalidate: 60 }
});

// No cache (always fresh)
const data = await fetch("https://api.example.com/posts", {
  cache: "no-store"
});

// Tag-based revalidation
const data = await fetch("https://api.example.com/posts", {
  next: { tags: ["posts"] }
});

// Revalidate from Server Action
import { revalidateTag } from "next/cache";
revalidateTag("posts");

// app/actions.ts
"use server";
import { revalidatePath } from "next/cache";

export async function createPost(formData: FormData) {
  const title = formData.get("title") as string;
  await db.posts.create({ data: { title } });
  revalidatePath("/blog");
}

// app/new-post/page.tsx
import { createPost } from "../actions";

export default function NewPostPage() {
  return (
    <form action={createPost}>
      <input name="title" required />
      <button type="submit">Create</button>
    </form>
  );
}