Next.js App Router Patterns
Guides the agent to build Next.js 14+ apps using the App Router, Server Components, streaming and data fetching.
- Repository
- wshobson/agents
- Stars
- 42,095
- Licence
- MIT
- Files
- 2 files
What it does
Once installed, the agent follows a set of Next.js App Router conventions when you ask it to build or change a Next.js web app. It knows how to structure folders like layout, page, loading and error files, when to use Server Components versus Client Components, how to fetch and cache data, and how to use streaming, parallel routes and Server Actions. The skill is a written guide for the agent; it does not install or run anything on its own.
Great for
- Developers starting a new Next.js project with the App Router
- Teams migrating an app from the Pages Router to the App Router
- Developers who want an agent to follow current React Server Component practices
Skip it if
- Non-developers who just want a website; the skill assumes working knowledge of React and Next.js and gives no step-by-step setup help
- Projects on Next.js versions older than 14 or using the Pages Router, where the patterns may not apply
Try asking
- “Set up a new Next.js 14 project with a root layout, a products page and loading states using the App Router”
- “Convert my existing Pages Router pages to the App Router and explain what changes”
- “Add a streaming product list with Suspense boundaries and a loading.tsx fallback”
- “Use a Server Action to save a form submission in my Next.js app”
Install in 3 steps
- 1
Download the skill
The ZIP contains the 2 original files, the MIT licence and an attribution note.
nextjs-app-router-patterns.zip - 2
Add it to your agent
Claude Code (all projects)
mkdir -p ~/.claude/skills && unzip nextjs-app-router-patterns.zip -d ~/.claude/skills/Claude Code / Agent SDK (this project only)
mkdir -p .claude/skills && unzip nextjs-app-router-patterns.zip -d .claude/skills/Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.
- 3
Ask for the task
No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.
Get better results
- Name the Next.js version you use so the agent picks the right patterns
- Ask for the reasoning behind Server versus Client Component choices and check them against your app's needs
- Review any generated fetch calls and cache settings, since the example uses external URLs and revalidation times you must set yourself
What's inside
- references/details.md
- SKILL.md
Redistributed unmodified from wshobson/agents under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.