Guide · Agent skill
How to use the Next.js App Router Patterns agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The Next.js App Router Patterns skill is a written guide that an AI agent reads before it works on a Next.js web app. It covers App Router file conventions, when to use Server Components versus Client Components, data fetching and caching, streaming, parallel routes and Server Actions. This guide explains what the skill does, how to install it, how to ask for work that triggers it, and what it needs from your project.
Next.js App Router Patternswshobson/agents · MIT Download the skill Quick start
- 1Download the ZIP. Download the nextjs-app-router-patterns skill ZIP from this page.
- 2Unzip the skill. Unzip the archive so the skill folder contains SKILL.md and references/details.md.
- 3Place it in a skills folder. Move the folder to ~/.claude/skills/ for all projects, or to .claude/skills/ in one project.
- 4Or upload it in the Claude apps. In the Claude apps, open Settings, go to Capabilities, then Skills, and upload the skill.
- 5Check your project. Confirm you have Node.js and a Next.js App Router project, since the skill installs nothing itself.
- 6Make a request. Ask for a Next.js task in plain language, such as building a page that streams data.
- 7Review the changes. Read the code the agent writes, especially data fetching and Server Actions, before you accept it.
What the skill makes the agent do
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 with layout, page, loading and error files, when a component should be a Server Component or a Client Component, how to fetch and cache data, and how to use streaming, parallel routes and Server Actions.
The skill is a guide for the agent, not a tool. It does not install or run anything on its own, and it does not change your project unless you ask the agent to make changes.
- Shows the App Router file conventions such as layout.tsx, page.tsx, loading.tsx, error.tsx and not-found.tsx
- Explains Server Components versus Client Components and the server-to-client boundary
- Covers data fetching, caching and ISR-style revalidation with examples
- Describes streaming with Suspense, parallel and intercepting routes, and Server Actions for mutations
Install the skill from the ZIP download
Download the ZIP for the nextjs-app-router-patterns skill from this page. Unzip it and place the skill folder in one of two locations. Use ~/.claude/skills/ to make the skill available across your projects, or use .claude/skills/ inside a single project to limit it to that project.
If you use the Claude apps instead of a project folder, you can upload the skill there. Open Settings, go to Capabilities, then Skills, and upload the skill from the ZIP.
- Personal install: unzip into ~/.claude/skills/
- Project install: unzip into .claude/skills/ in your project root
- Claude apps: Settings → Capabilities → Skills, then upload
~/.claude/skills/nextjs-app-router-patterns/
├── SKILL.md
└── references/
└── details.mdAsk for work that triggers the skill
The skill's description says it applies when you build Next.js applications, implement SSR or SSG, or optimize React Server Components. You do not need a special command. Describe the Next.js task in ordinary language and mention the App Router, Server Components, streaming or data fetching where it applies.
The more specific your request, the more useful the output. Name the page, the data it needs and any loading behaviour you want.
- 'Build a products page in my Next.js App Router app that streams the product list behind a skeleton.'
- 'Convert this Pages Router dashboard to the App Router and keep the data fetching on the server.'
- 'Add a Server Action that saves the profile form and show an error state if it fails.'
- 'Review this page and tell me which components should be Client Components.'
Examples of what the agent produces
The skill includes a worked example of a products page. The page is an async Server Component that reads search parameters, renders a filter sidebar, and wraps the product list in a Suspense boundary with a skeleton fallback. The list is a separate Server Component, so the rest of the page can show before the slow data arrives.
The root layout example shows metadata with a title template, a font loaded with next/font/google, and a Providers wrapper around children. A page example fetches data with a revalidate option of 3600 seconds, which is the ISR pattern the guide describes.
- Products page with search parameters and streamed list
- Root layout with metadata and a client-side Providers wrapper
- Data fetch with revalidation for content that changes occasionally
What you need before you start
The skill assumes you already have Node.js and a Next.js project that uses the App Router on the 14+ line. It installs nothing itself, so it will not create a project or set up dependencies for you.
It also assumes working knowledge of React and Next.js. If you are new to these, learn the basics first, because the agent's output will use these concepts without explanation. Projects still on the Pages Router may need a migration before the patterns apply.
- Node.js installed
- An existing Next.js project using the App Router
- Basic React and Next.js knowledge to review what the agent writes
Safety notes: scripts and network
The skill does not run scripts and does not use the network. It is only text that guides the agent, so installing it does not add executable code to your machine.
The agent still writes code into your project when you ask it to. Review diffs before you accept them, especially for data fetching, environment secrets and Server Actions, since those affect what runs on your server.
- Runs scripts: no
- Uses network: no
- Review generated changes to data fetching, secrets and Server Actions before committing
Tips for better results
Give the agent your Next.js version and your current folder layout. The skill targets the App Router, so mention if the project uses the Pages Router so the agent can plan a migration instead of mixing patterns.
Check the reference file for detailed patterns when the main guide is not enough. The skill points to references/details.md for worked examples.
- State whether the project uses the App Router or Pages Router
- Ask for Client Components only where interactivity needs them
- Ask for a loading.tsx or Suspense fallback for slow pages
What people use it for
- Starting a new Next.js App Router project with a correct layout, loading and error file structure
- Migrating a Pages Router app to the App Router while keeping data fetching on the server
- Adding streaming with Suspense so slow data does not block the whole page
- Deciding which components should be Client Components to keep the bundle smaller
- Adding a Server Action for a form that saves data
Frequently asked questions
How do I install the nextjs-app-router-patterns skill?
Download the ZIP from this page and unzip it. Place the folder in ~/.claude/skills/ to use it everywhere, or in .claude/skills/ inside a project to use it there only. You can also upload it in the Claude apps under Settings, Capabilities, then Skills.
Is the nextjs-app-router-patterns skill free to use?
The skill is published under the MIT licence, as listed on this page. Check the licence file in the source repository for the full terms before you reuse it in a commercial project.
What do I need to use this skill?
You need Node.js and a Next.js project that uses the App Router on the 14+ line. The skill does not install these or set up your project, and it assumes working knowledge of React and Next.js.
Does the skill run scripts or access the internet?
No. The listing states that it runs no scripts and uses no network. It is a written guide the agent reads, so it does not install or run anything on its own.
Will this skill work with the Pages Router?
The patterns are for the App Router, so they may not apply to projects on the Pages Router or to Next.js versions older than 14. Plan a migration first if your project uses the Pages Router.
How is this different from just asking an agent to build a Next.js app?
Without the skill, the agent works from general knowledge. With it, the agent follows a defined set of App Router conventions for file structure, Server and Client Components, caching and streaming. The output is more consistent, but you still need to review the code it writes.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use this skill if you are building or migrating a Next.js app with the App Router and want your agent to follow current Server Component practices. Pick something else if you are a non-developer who just wants a website, or if your project runs an older version or the Pages Router, since the patterns may not fit.
Download the skill