How to use the Next.js Expert agent skill (nextjs-expert)

What the skill makes the agent do

Once installed, the skill gives the agent a set of Next.js best-practice guidelines to follow while it works on your web project. It does not add new tools, run code or connect to anything. It shapes the advice and code the agent writes.

The guidance steers the agent toward App Router conventions: Server Components by default, route folders that map to URLs with layout.tsx and page.tsx, loading.tsx and error.tsx boundaries per route segment, Route Handlers for API endpoints, middleware in middleware.ts, next/image and next/font for optimization, and caching or revalidation through revalidate, revalidatePath and revalidateTag.

• Server Components unless a component needs browser APIs, event handlers or React state
• Route Handlers in app/api/.../route.ts with exported GET, POST, PUT and DELETE functions
• Server Actions marked with "use server" for forms and mutations
• Warnings against putting "use client" high in the tree and against using useEffect for data fetching in Server Components

Install the skill from the ZIP

Download the nextjs-expert ZIP from this page and unzip it. The skill is a single file, SKILL.md. Then place the folder in one of two locations: your personal skills folder at ~/.claude/skills/, or a project-specific folder at .claude/skills/ inside your project, which keeps the skill with that codebase.

If you use the Claude apps instead of a local setup, you can upload the skill under Settings → Capabilities → Skills.

• Personal: ~/.claude/skills/nextjs-expert/
• Project only: .claude/skills/nextjs-expert/ inside your project
• Claude apps: Settings → Capabilities → Skills, then upload

Trigger the skill with natural requests

You do not need a special command. Ask for Next.js help in plain language while working on a Next.js project, and the agent can apply the skill's guidelines. Be specific about the App Router and your version so the answer matches your setup.

Requests that fit the skill's focus include asking how to structure routes, when a component should be a Client Component, how to set up caching or ISR, or how to add middleware for redirects or headers.

• "Set up the app/ routes for a blog with a shared layout and a loading state."
• "Should this component be a Server Component or a Client Component? It only shows a list of posts."
• "Convert this data fetch from useEffect into a Server Component."
• "Add a Route Handler at app/api/contact/route.ts that accepts POST."

Examples of what good output looks like

For a product listing page, the agent following this skill would typically fetch data directly in an async Server Component, wrap a slow section in Suspense so it streams, and keep interactive parts such as an add-to-cart button in a small Client Component. This keeps client bundles small, which the skill explicitly recommends.

For a page of articles that rarely change, the skill points toward generateStaticParams for pre-rendering at build time, with on-demand ISR for pages outside that set.

What the skill needs and what it does not do

The skill lists no requirements. It runs no scripts and uses no network access. It is written guidance in one file, SKILL.md, so there is nothing extra to install and no commands to run as part of the skill itself.

The skill is for Next.js 14+ projects using the App Router. It is not suited to the older Pages Router or to other frameworks, where the advice would not apply directly.

• Requires: nothing listed
• Runs scripts: no
• Uses network: no

Safety notes and limits

Because the skill has no scripts or network access, it cannot change your system by itself. The code the agent writes still needs your review, as with any agent output, and you should run your own tests before deploying.

The skill is general guidance and may lag behind framework changes, so check version-specific details against the official Next.js documentation. It only mentions middleware for auth at a high level, so do not rely on it for authentication design or other security-critical decisions.

• Verify version-specific APIs against official Next.js docs
• Do not use it as the basis for authentication design
• Review and test all generated code before deployment

Tips for better results

Name your Next.js version and whether the project uses the App Router, so the agent does not mix in Pages Router patterns. The skill itself warns against confusing the two, and clear context helps.

Ask for one change at a time, such as a single route or a single component, and check how the agent decides between Server and Client Components. Common pitfalls it targets include unnecessary "use client" directives and stale cache settings.

• State your Next.js version and router type in each request
• Work on one route or component per request
• Check any "use client" the agent adds and ask why it is needed
• Confirm caching and revalidation times match your data's freshness needs