Skip to content
Get packs

Next.js Developer

Guides an agent to build Next.js 14+ App Router apps with server components, actions, and SEO metadata

Source Download skill
Repository
Jeffallan/claude-skills
Stars
12,176
Licence
MIT
Files
6 files

What it does

Next.js is a popular framework for building websites and web apps in React. This skill gives an AI agent specialist guidance on the modern Next.js approach: the App Router, server components that fetch data on the server, server actions for form submissions, caching and revalidation, streaming, SEO metadata, and deployment to Vercel or self-hosted setups. Once installed, the agent follows these rules by default, such as using next/image for images and adding loading and error states to routes that fetch data.

Great for

  • Developers starting or upgrading a Next.js 14+ project to the App Router
  • Teams who want consistent conventions for server components and data fetching
  • Developers who want help writing generateMetadata for SEO and preparing a production build

Skip it if

  • Projects still on the Pages Router, since the skill explicitly steers away from it and would require migration work
  • Non-developers expecting a finished website, because the output is code that still needs review and running
  • Production deployments without human review, since generated code can contain errors that only a build or test run will catch

Try asking

  • “Create an App Router product listing page that fetches from an API with 60-second revalidation”
  • “Write a server action that saves a form submission and revalidates the products page”
  • “Add generateMetadata with Open Graph tags to my dynamic blog post route”
  • “Scaffold loading.tsx and error.tsx files for my dashboard routes and check the build passes”
Step-by-step guide: how to use Next.js DeveloperInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 6 original files, the MIT licence and an attribution note.

    nextjs-developer.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip nextjs-developer.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip nextjs-developer.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 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

  • Give the agent your Next.js version and hosting target (Vercel or self-hosted) so it picks the right deployment guidance
  • Ask it to run next build and review the output yourself before deploying, since the skill's checklist includes Lighthouse scores above 90 that you should verify
  • Review any server action or database code carefully, especially input validation, because the examples do not show it

What's inside

  • references/app-router.md
  • references/data-fetching.md
  • references/deployment.md
  • references/server-actions.md
  • references/server-components.md
  • SKILL.md

Redistributed unmodified from Jeffallan/claude-skills 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.