nextjs-app-router-patterns Skill: Next.js App Router Patterns for Claude

Gives your coding assistant Next.js 14+ App Router patterns for Server Components, streaming, parallel routes and Server Actions.

Installs: 33.1K; on skills.sh
Stars: 42.1K; on GitHub
Files: 1; besides SKILL.md
Updated: Oct 2026; last repo commit

nextjs-app-router-patterns is a reference skill by wshobson that teaches your assistant how to structure a Next.js 14+ App Router app. It covers rendering modes, file conventions, Server and Client Components, Server Actions, parallel and intercepting routes, streaming, route handlers, metadata and caching.

The SKILL.md holds the core concepts and a quick start. Eight worked patterns and the caching examples sit in a reference file the assistant opens when it needs them.

Good for

Developers building a new Next.js app with the App Router
Teams moving from the Pages Router to the App Router
Anyone tuning data fetching, caching or streaming in React Server Components

Install nextjs-app-router-patterns

Claude Code

Copy this prompt.

Install the nextjs-app-router-patterns skill in Claude Code. Run this command:

npx skills add https://github.com/wshobson/agents --skill nextjs-app-router-patterns

Then check that it loaded and tell me how to use it.

2
Paste it into Claude Code. It shows the change and asks before running it.

Requires Node.js.

From its listing on skills.sh. Source.

What's in the skill

When it loads

Master Next.js 14+ App Router with Server Components, streaming, parallel routes, and advanced data fetching. Use when building Next.js applications, implementing SSR/SSG, or optimizing React Server Components.

Sections in SKILL.md

When to Use This Skill
Core Concepts
1. Rendering Modes
2. File Conventions
Quick Start
Detailed patterns and worked examples
Best Practices
Do's
Don'ts

Key facts

Author: wshobson (wshobson/agents); the plugin manifest names Seth Hobson
Repo: wshobson/agents
Installs on skills.sh: 33,098 as of 2026-11-02
GitHub stars: 42,081 for the whole wshobson/agents repo, 2026-11-02
License: MIT (README and plugin manifest)
Last commit to the repo: 2026-10-30
What is inside: 2 files including SKILL.md (references/details.md)
Part of: The frontend-mobile-development plugin (version 1.2.4), which also has 3 other skills, 2 agents and 1 command
Targets: Next.js 14+ App Router
skills.sh audits: Gen Agent Trust Hub pass, Socket pass, Snyk pass (2026-11-02)

What it includes

Server, Client, Static, Dynamic and Streaming
A table that says where each mode runs and when to use it.
Try: “Add a streaming product page with a Suspense fallback to my Next.js app.”
Read · Rendering modes
layout, page, loading, error, not-found, route, template, default
Lists the special files in the app folder, plus opengraph-image.tsx for generated social images.
Read · File conventions
A root layout with fonts and a cached server fetch
Shows a layout with metadata and a Server Component page that fetches with revalidate set to 3600.
Write · Quick start
Server Components, Client Components, Server Actions
In references/details.md: data fetching on the server, use client for interactivity, and mutations with Server Actions.
Write · Patterns 1 to 3
Parallel routes, intercepting routes, streaming
Includes the modal pattern with intercepting routes and Suspense boundaries for slow data.
Write · Patterns 4 to 6
Route handlers and metadata
API endpoints in route.ts and metadata for SEO.
Write · Patterns 7 and 8
Data cache options and revalidation
Covers cache no-store and force-cache, time-based revalidation, tag-based invalidation, and revalidateTag and revalidatePath from a Server Action.
Write · Caching strategies
Five rules each
Start with Server Components, colocate fetching and use Suspense. Do not use hooks in Server Components, and do not over-nest layouts.
Read · Do's and Don'ts

From the official docs

Questions

What does nextjs-app-router-patterns do?

It gives your assistant a reference for Next.js 14+ App Router work: Server and Client Components, Server Actions, parallel and intercepting routes, streaming, route handlers, metadata and caching.

How do I install nextjs-app-router-patterns?

Use the install box at the top of this page. The skill is also part of the frontend-mobile-development plugin in the same repo, which adds three more skills, two agents and a command.

Does it help me move from the Pages Router?

The SKILL.md lists migrating from the Pages Router to the App Router as a use. The worked examples are App Router patterns.

Is nextjs-app-router-patterns safe to use?

It is a reference guide with code examples and it bundles no scripts, only SKILL.md and one reference file. The assistant writes code in your project from it, so review the diff.

Which Next.js version does it target?

Next.js 14 and newer, according to the skill's description. Check the examples against the version your project uses.

Can it run in the Claude app or Codex?

Neither the SKILL.md nor the repo README documents the Claude app. The install box lists Claude Code, Codex and skills CLI routes from our install template. The skill is instructions plus one reference file and bundles no scripts.

Information

updated Nov 2, 2026

Repository: wshobson/agents
Folder: plugins/frontend-mobile-development/skills/nextjs-app-router-patterns

wshobson/agents skills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 2

nextjs-app-router-patterns SKILL.md · github.com
details.md · github.com