MITFrontend

Next.js App Router Patterns

Name: Next.js App Router Patterns
Author: wshobson

By wshobson· wshobson/agents· 0

Reference patterns for Next.js 14+ App Router, Server Components, and streaming.

Installation

1
Make sure Claude is on your device and in your terminal.
Skills load from ~/.claude/skills/ when Claude Code starts up — so you need it on your machine first. If you don't have it yet, install it once with the command below, then run claude in any terminal to verify.
One-time setup
```
npm i -g @anthropic-ai/claude-code
```
Already have it? Skip ahead.

Paste into Claude Code or into your terminal.

Install

git clone ht•••••••••••••••••••••••••••••••••••• ••••••••••••••••••••• •• ••••• •• •••••••••••••••••••••••••••••••••••••••••••••••••••• •• •• •• ••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• •••••••••••••••••••••••••••••••••••••••••••••••••••••

This copies the whole skill folder into ~/.claude/skills/nextjs-app-router-patterns-wshobson/ — the SKILL.md plus any scripts, reference docs, or templates the skill ships with. Safe default: works for every skill.

Faster alternative (instruction-only skills)

Skips the clone and grabs only the SKILL.md file. Don't use this if the skill ships Python scripts, reference markdowns, or asset templates — they won't be downloaded and the skill will fail when it tries to load them.

Quick install (SKILL.md only)

mkdir -p ~/.••••••••••••••••••••••••••••••••••••••••••••••••• •• •••• ••••• ••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• •• •••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••

Restart Claude Code.
Quit and reopen Claude Code (or any other agent that loads from ~/.claude/skills/). New skills are picked up on startup.
Just ask Claude.
Skills auto-activate when your request matches the skill's description — no slash command needed. Trigger phrases live in the skill's own frontmatter; you can read them in the “What this skill does” section above.

Prefer to read the source first? Open on GitHub.

When Claude uses it

Teaches Claude the Next.js 14+ App Router model: when to reach for Server vs Client Components, the file conventions (layout, page, loading, error, route, template, default), rendering modes from static to streaming, and data fetching with fetch-level revalidation. Reach for it when building or migrating App Router apps, adding Suspense streaming or parallel/intercepting routes, or wiring Server Actions for mutations. Includes a root layout and Server Component quick-start plus do/don't rules on the server/client boundary.

What this skill does

What it does: Gives Claude a working reference for Next.js 14+ App Router architecture so it picks the right rendering mode and file convention instead of guessing.

Maps the five rendering modes (Server Components, Client Components, static, dynamic, streaming) to where they run and when to use each
Documents the App Router file conventions: layout.tsx, page.tsx, loading.tsx, error.tsx, not-found.tsx, route.ts, template.tsx, default.tsx, and opengraph-image.tsx
Provides a quick-start root layout with metadata templates and a Server Component page using ISR via fetch(..., { next: { revalidate } })
Covers parallel/intercepting routes, Suspense streaming boundaries, and Server Actions for progressively enhanced mutations
Lists concrete do/don't rules for the server-to-client boundary (no hooks in Server Components, colocate data fetching, avoid over-nesting layouts)
Points to a references/details.md file for deeper worked examples when the overview is not enough