hjemmesidekongen/nextjs-app-router

Next.js App Router

App Router (Next.js 13+) defaults everything to Server Components. The mental model shift: run as much as possible on the server, opt into the client only when you need it.

Server vs Client Component Decision

Server Component (default): data fetching, DB access, sensitive env vars, large dependencies, static or async rendering. No hooks, no event handlers, no browser APIs.

Client Component ('use client'): useState, useEffect, event handlers, browser APIs (window, localStorage), third-party components that require client context.

Rule of thumb: push 'use client' to the leaves. A Server Component can import a Client Component, but not the reverse — a Client Component cannot import a Server Component directly.

Data Fetching Patterns

Fetch directly in async Server Components. No API layer needed for internal data.

// app/products/page.tsx — Server Component
export default async function ProductsPage() {
  const products = await db.product.findMany(); // direct DB call
  return <ProductList products={products} />;
}

Parallel fetching with Promise.all avoids waterfalls: const [user, posts] = await Promise.all([getUser(id), getPosts(id)]).

Caching Model

Three caches: fetch cache (static/ISR), router cache (client in-memory), full route cache (server static). Control fetch behavior with the cache and next options: cache: 'no-store' for dynamic, next: { revalidate: 60 } for ISR, next: { tags: ['x'] } for tag-based invalidation. Use revalidatePath / revalidateTag for on-demand purges from webhooks or mutations.

Key Rules

• Fetch in Server Components. Never in Client Components via useEffect.
• loading.tsx auto-wraps the segment in Suspense — always add one for async routes.
• error.tsx must be 'use client' — it needs the reset() callback.
• Route Handlers are for external consumers only. Internal data flows through Server Components.
• Server Actions handle mutations from forms — no separate API route needed.

See references/process.md for file conventions, parallel/intercepting routes, middleware, metadata API, server actions, and anti-patterns with examples.