---
title: Next.js App Router Patterns
category: product
entity_type: skill
price: $15
canonical: https://forgehouse.ai/skills/nextjs-app-router-patterns/
lang: en
hreflang_alt: https://forgehouse.ai/tr/skiller/nextjs-app-router-patterns/
last_updated: 2026-06-20
---

# Next.js App Router Patterns

> Master Next.js 14+ App Router with Server Components, streaming, parallel routes, and advanced…

A complete pattern library for building modern full-stack apps on the Next.js 14+ App Router with React Server Components. It teaches when to render on the server versus the client, how to stream slow data with Suspense, and how to handle mutations with Server Actions: backed by eight copy-ready patterns covering data fetching, parallel routes, intercepting modals, route handlers, and SEO metadata.

## Use cases
- Building Server Component data fetching with ISR and cache tags
- Streaming slow widgets with Suspense and loading.tsx
- Mutations and form handling with Server Actions
- Parallel and intercepting routes (dashboard slots, photo modals)
- generateMetadata + generateStaticParams for SEO pages
- Migrating from Pages Router to App Router

## Benefits
- Smaller client bundles by keeping logic on the server
- Faster perceived load via progressive streaming, not blank TTI waits
- Precise cache invalidation that rebuilds only affected pages
- Layered auth defense so a bypassed layer is caught by the next

## What’s included
- Rendering-mode decision table (Server/Client/Static/Dynamic/Streaming)
- Full App Router file-convention map (layout, loading, error, route, parallel)
- 8 production patterns including Server Actions, parallel routes, and route handlers
- Tag-based cache invalidation with revalidateTag and revalidatePath
- Dynamic OG image generation with ImageResponse / next/og at the edge
- Server-vs-Client do's and don'ts to avoid common boundary mistakes

## Who it’s for
For React developers building or migrating production apps on the Next.js App Router who want battle-tested architecture instead of guesswork.

## How it runs
The difference between a 300KB bundle and a 50KB one is where the client boundary sits. This App Router loop starts on the server and pushes interactivity out to the leaves.
1. Starts everything as a Server Component with colocated fetching: async pages call the database or API directly with the right cache hint (revalidate for ISR, tags for targeted invalidation), and secrets never leave the server.
2. Isolates client islands at the leaves: only the genuinely interactive pieces (an add-to-cart button with useTransition, a form) get 'use client', which is what turns a 300KB bundle into a 50KB one.
3. Streams slow data instead of blocking on it: loading.tsx covers the route level, nested Suspense boundaries wrap reviews, recommendations and other slow widgets so the header renders instantly and the rest flows in.
4. Routes mutations through Server Actions: cookie/session check at the top, the database write, then revalidateTag or revalidatePath so exactly the affected cache entries refresh, not the whole site.
5. Reaches for the advanced route shapes when the UI calls for them: parallel @slots for dashboard panels with independent loading states, intercepting (.) routes for the modal-over-page photo pattern, generateStaticParams to push dynamic routes into SSG.
6. Finishes the SEO layer per page: generateMetadata builds title, description, OG and Twitter cards from live data, and opengraph-image.tsx renders a branded dynamic OG image via ImageResponse on the Edge runtime.

## FAQ
### We're migrating off the Pages Router. Does this cover that path or only new builds?
Migration is one of the named use cases. The rendering-mode decision table and the full file-convention map are built to translate Pages Router habits, getServerSideProps thinking, _app structure, into their App Router equivalents, alongside the eight patterns you'll build with afterward.

### I've read the App Router docs end to end and still hesitate on server-versus-client calls, what do the eight patterns give me that the docs didn't?
The docs describe each API in isolation; this packs eight copy-ready production patterns that combine them, plus the decision tables and server-versus-client do's and don'ts that the docs leave you to infer. It encodes the judgment calls, not just the API surface.

### Does it cover the Next.js 16 cache directives like use cache and cacheLife?
No. This library targets the 14+ App Router foundation: Server Components, ISR with cache tags, Suspense streaming, Server Actions, and parallel routes. The Next.js 16 Cache Components model is a separate, deeper topic with its own dedicated skill.

## Price
$15, one-time, no subscription. VAT included.

Related guide: [AI code review and developer workflow](https://forgehouse.ai/guides/ai-code-review/)