Guide · Agent skill

How to use the Next.js Developer agent skill

Updated 2026-10-29 · written with AI from the project's own documentation and checked against our catalogue data

The nextjs-developer skill is a set of instructions and reference files that teaches an AI agent how to build Next.js 14+ applications the modern way, using the App Router, server components, and server actions. It is aimed at developers starting or upgrading a Next.js project who want consistent conventions. After this guide you will know what the skill changes about the agent's behaviour, how to install it, how to trigger it, and what to check before shipping the code it writes.

Next.js DeveloperJeffallan/claude-skills · MIT Download the skill

Quick start

1Download the ZIP. Download the nextjs-developer skill ZIP from this page.
2Unzip into a skills folder. Place the folder in ~/.claude/skills/ for personal use, or in your project's .claude/skills/ folder for one project.
3Or upload in the Claude apps. If you use the Claude apps, go to Settings → Capabilities → Skills and upload the skill.
4Make a request with a trigger term. Ask for the task using terms such as App Router, Server Actions or generateMetadata.
5Give project context. State your Next.js version, the route path and the data source the page should use.
6Review the generated code. Read the files the agent creates and check the data handling and environment variables.
7Run the production build. Run next build locally and fix any errors before deploying.

What an agent skill is and what this one does

An agent skill is a folder containing a SKILL.md file and optional reference files. When the skill is installed, the agent can load these instructions when a request matches the skill's description, so it follows a specific playbook instead of general habits.

This skill focuses on the App Router. Its SKILL.md tells the agent to keep components as Server Components by default, add 'use client' only at the leaf boundary where interactivity is needed, fetch data on the server with native fetch and explicit cache or revalidation options, and use generateMetadata for SEO instead of hardcoded title or meta tags. It also tells the agent to use next/image for content images and to add loading.tsx and error.tsx to route segments that fetch data.

Configure route handlers, middleware and API routes
Add streaming SSR and Suspense-based loading states
Write generateMetadata for dynamic SEO and Open Graph data
Set up server actions for form submissions with revalidation
Prepare a production build and deploy to Vercel or a self-hosted setup

Install the skill from the ZIP download

Download the ZIP for the nextjs-developer skill from this page and unzip it. The skill folder should contain SKILL.md and a references folder with app-router.md, data-fetching.md, deployment.md, server-actions.md and server-components.md.

For a personal install that works across your projects, unzip the skill into ~/.claude/skills/. To limit it to a single project, unzip it into that project's .claude/skills/ folder instead.

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

Personal: ~/.claude/skills/nextjs-developer/
Project only: <your-project>/.claude/skills/nextjs-developer/
Claude apps: Settings → Capabilities → Skills, then upload

Trigger the skill with natural requests

You do not need a special command. The skill's description lists the topics it covers, so mention them in your request. Useful trigger terms from the skill include Next.js 14, App Router, Server Components, Server Actions, generateMetadata, loading.tsx, Vercel and Next.js performance.

Be specific about the task and the project. The agent works better when it knows your Next.js version, whether you already have an app/ directory, and what data source the pages should read from.

"Using the Next.js skill, add a products page in app/products that loads data on the server with a loading state."
"Write generateMetadata for app/blog/[slug]/page.tsx using the post's title, description and cover image."
"Create a server action for a contact form that saves to the database and revalidates /contact."
"Set up loading.tsx and error.tsx for the dashboard routes and check that the production build passes."

Examples of what the agent produces

The skill includes example patterns the agent is expected to follow. A typical product list is a Server Component that calls fetch with next: { revalidate: 60 } for incremental static regeneration, wrapped in Suspense with a fallback. A form is handled by a 'use server' function that writes to the database and calls revalidatePath, connected to the form through the action attribute.

For dynamic pages, the skill shows a generateMetadata function that loads a record by its id and returns title, description and openGraph values. The output template asks the agent to provide the app structure, layout and page components, any server actions, configuration such as next.config.js, and a short explanation of the rendering strategy it chose.

export async function generateMetadata(
  { params }: { params: { id: string } }
): Promise<Metadata> {
  const product = await fetchProduct(params.id)
  return {
    title: product.name,
    description: product.description,
    openGraph: { title: product.name, images: [product.imageUrl] },
  }
}

Requirements and what you must supply

You need Node.js and an existing Next.js 14+ project. The skill assumes npm or a similar package manager and the next build command. Examples use a placeholder database client (db) and api.example.com, so you must connect the code to your real database or API.

The skill does not run scripts and does not use the network by itself. Any network calls in the generated code come from your project, such as fetch requests to the API you configure.

Node.js and a Next.js 14+ project using the App Router
A database or API your code calls
npm or a similar package manager

Safety notes and review before shipping

The skill's own workflow says to run next build locally, confirm there are no type errors, check that NEXT_PUBLIC_* and server-only environment variables are set, and run Lighthouse or PageSpeed to check Core Web Vitals. Treat these as required checks, not optional extras.

Generated code is still code. Review data handling, form input and environment variables before you deploy. Vercel's deployment reference includes a vercel.json example with CORS headers set to allow any origin on /api routes; check whether that is appropriate for your app before copying it.

Run next build and fix every error before deploying
Keep server-only secrets out of NEXT_PUBLIC_* variables
Review any CORS or header settings in vercel.json
Have a human review and test generated code before production

next build

Tips for getting better results

Name the route you want, such as app/dashboard/settings/page.tsx, so the agent places files correctly. If you have an existing project on the Pages Router, plan a migration first, because the skill steers toward the App Router and does not cover Pages Router work.

Ask the agent to explain its rendering choice. The skill's output template includes a short explanation of the strategy, which makes it easier to check whether you want static, dynamic or revalidated data for each page.

Give the route path and whether the page is static, dynamic or revalidated
Ask for loading and error states on every data-fetching route
Ask the agent to run next build and report the result

What people use it for

Adding a server-rendered product list with ISR revalidation to an existing App Router project
Writing generateMetadata for blog post pages so each page has its own title, description and Open Graph image
Building a contact or signup form using a server action that revalidates the page afterwards
Scaffolding loading.tsx and error.tsx files for dashboard route segments
Preparing a Next.js project for deployment to Vercel with a checked production build

Frequently asked questions

How do I install the nextjs-developer skill?

Download the ZIP from this page and unzip it into ~/.claude/skills/ for personal use, or into a project's .claude/skills/ folder for a single project. In the Claude apps, you can instead upload it under Settings → Capabilities → Skills.

Is the nextjs-developer skill free?

The skill is licensed under MIT, as stated on this page. Check the license file in the source repository for the full terms before reusing it.

What do I need to use this skill?

You need Node.js and a Next.js 14+ project using the App Router. The skill assumes npm or a similar tool and the next build command, and your code needs a database or API to call.

Does this skill work with the Pages Router?

No. The skill explicitly steers away from the Pages Router and expects an app/ directory, so an existing Pages Router project would need migration work first.

Does the skill run scripts or access the network?

According to this page, the skill runs no scripts and uses no network. Any network requests come from the code your project contains, such as calls to the API you configure.

Can I trust the code the skill generates for production?

Not without review. The generated code can contain errors that only a build or test run will catch, so run next build, check environment variables and test the result before deploying.

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 upgrading a Next.js 14+ App Router project and want an agent to follow consistent conventions for server components, data fetching, metadata and deployment. Pick something else if your project is on the Pages Router, if you need a finished website without a developer, or if you plan to deploy generated code without review.

Download the skill