Nextjs Developer Skill for Claude
Use when building Next.js 14+ applications with App Router, server components, or server actions. Invoke for full-stack features, performance optimization, SEO implementation, production deployment.
Install
one command, takes just this skill from the repositorynpx skills add https://github.com/zebbern/claude-code-guide --skill nextjs-developerWhat comes with it
46 689 bytes besides the instructionThe instruction itself
10 sections, as written by the authorNext.js Developer
Senior Next.js developer with expertise in Next.js 14+ App Router, server components, and full-stack deployment with focus on performance and SEO excellence.
Role Definition
You are a senior full-stack developer with 10+ years of React/Next.js experience. You specialize in Next.js 14+ App Router (NOT Pages Router), React Server Components, server actions, and production-grade deployment. You build blazing-fast, SEO-optimized applications achieving Core Web Vitals scores > 90.
When to Use This Skill
- Building Next.js 14+ applications with App Router
- Implementing server components and server actions
- Setting up data fetching, caching, and revalidation
- Optimizing performance (images, fonts, bundles)
- Implementing SEO with Metadata API
- Deploying to Vercel or self-hosting
Core Workflow
- Architecture planning - Define app structure, routes, layouts, rendering strategy
- Implement routing - Create App Router structure with layouts, templates, loading states
- Data layer - Setup server components, data fetching, caching, revalidation
- Optimize - Images, fonts, bundles, streaming, edge runtime
- Deploy - Production build, environment setup, monitoring
Reference Guide
Load detailed guidance based on context:
| Topic | Reference | Load When |
| ----------------- | --------------------------------- | ---------------------------------------------------- |
| App Router | references/app-router.md | File-based routing, layouts, templates, route groups |
| Server Components | references/server-components.md | RSC patterns, streaming, client boundaries |
| Server Actions | references/server-actions.md | Form handling, mutations, revalidation |
| Data Fetching | references/data-fetching.md | fetch, caching, ISR, on-demand revalidation |
| Deployment | references/deployment.md | Vercel, self-hosting, Docker, optimization |
Constraints
MUST DO
- Use App Router (NOT Pages Router)
- Use TypeScript with strict mode
- Use Server Components by default
- Mark Client Components with 'use client'
- Use native fetch with caching options
- Use Metadata API for SEO
- Optimize images with next/image
- Use proper loading and error boundaries
- Target Core Web Vitals > 90
MUST NOT DO
- Use Pages Router (pages/ directory)
- Make all components client components
- Fetch data in client components unnecessarily
- Skip image optimization
- Hardcode metadata in components
- Use external state managers without need
- Skip error boundaries
- Deploy without build optimization
Output Templates
When implementing Next.js features, provide:
- App structure (route organization)
- Layout/page components with proper data fetching
- Server actions if mutations needed
- Configuration (next.config.js, TypeScript)
- Brief explanation of rendering strategy
Knowledge Reference
Next.js 14+, App Router, React Server Components, Server Actions, Streaming SSR, Partial Prerendering, next/image, next/font, Metadata API, Route Handlers, Middleware, Edge Runtime, Turbopack, Vercel deployment
Other skills for the same job
different authors, same section of the catalogue
Configure, explore, and optimize Nx monorepo workspaces. Use when setting up Nx, exploring workspace structure, configuring project boundaries, analyzing affected projects, optimizing build caching, or implementing CI/CD with affected commands. Keywords — nx, monorepo, workspace, projects, targets, affected. Do NOT use for running tasks (use nx-run-tasks) or code generation with generators (use nx-generate).
> Design, validate, and optimize schema.org structured data for eligibility, correctness, and measurable SEO impact. Use when the user wants to add, fix, audit, or scale schema markup (JSON-LD) for rich results. This skill evaluates whether schema should be implemented, what types are valid, and how to deploy safely according to Google guidelines.
Fetches real-time Azure retail pricing using the Azure Retail Prices API (prices.azure.com) and estimates Copilot Studio agent credit consumption. Use when the user asks about the cost of any Azure service, wants to compare SKU prices, needs pricing data for a cost estimate, mentions Azure pricing, Azure costs, Azure billing, or asks about Copilot Studio pricing, Copilot Credits, or agent usage estimation. Covers compute, storage, networking, databases, AI, Copilot Studio, and all other Azure service families.
Monitor paid-ad account pacing, delivery, performance, creative fatigue, tracking, policy, and data quality across supported platforms. Use for daily or weekly checks, anomaly review, budget pacing, post-launch verification, or campaign monitoring.
Audit server-side paid-media measurement including server-side tag management, platform conversion APIs, event taxonomy, browser/server deduplication, consent, hashing, data quality, observability, and privacy. Use for server-side tracking, sGTM, server-side tagging, CAPI, Events API, event_id, pixel debugging, first-party measurement, or conversion data loss.
Coordinate the end-to-end CAD/source-asset to SimReady workflow. Use for broad requests such as CAD to SimReady, source asset to simulation-ready USD, or prop packaging that require conversion, material/physics assignment, SimReady conformance, validation, and optional package creation; deploy or verify Content Agents services first when property assignment is enabled; route single-stage work through nested references.
Convert Kanchi-style dividend investing into a repeatable US-stock operating procedure. Use when users ask for かんち式配当投資, dividend screening, dividend growth quality checks, PERxPBR adaptation for US sectors, pullback limit-order planning, or one-page stock memo creation. Covers screening, deep dive, entry planning, and post-purchase monitoring cadence.
EAS service (paid). Deploy Expo apps to the app stores with EAS - build and submit to the iOS App Store, Google Play Store, and TestFlight, configure eas.json build and submit profiles, manage app versions and build numbers, and publish App Store metadata and ASO. Use whenever the user wants to deploy, release, or ship an app to production or the app stores, is preparing a production build, running eas build or eas submit, shipping to TestFlight, bumping version or build numbers, or setting up store listing metadata. For deploying an Expo website or API routes, use the eas-hosting skill.
How to use it
Take zebbern/nextjs-developer from the repository into ~/.claude/skills for personal
use, or into .claude/skills inside a project.
The agent identifies a skill by the name field in its header. Two skills with the
same name cannot sit side by side — one of them will be ignored.