nextjs-developer
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.
pinned to #9d252b3updated last month
Ask your AI client: “install skills/nextjs-developer”.
Requires the metahub MCP server installed in your client. Set up MCP.
mh install skills/nextjs-developermetahub onboarded this repo on the author's behalf.
If you own github.com/zebbern/claude-code-guide on GitHub, claim the listing to take over publishing. Your claim preserves the existing eval history and badges; only the curator label is replaced with verified-publisher on your next publish.
Stars
4,568
Last commit
last month
Latest release
published
- #ai
- #ai-agent
- #ai-agent-tools
- #anthropic-claude
- #claude
- #claude-ai
- #claude-api
- #claude-code
- #claude-code-communication
- #claude-code-guide
- #claude-code-skills
- #claude-commands
- #claude-desktop
- #claude-mcp
- #claude-sonnet
- #code
- #mcp
- #mcp-agents
- #mcp-tools
- #vscode-extension
About this skill
Pulled from SKILL.md at publish time.
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.
Automated checks the publisher passed at publish time — structure, docs, safety, and whether the artifact behaves as claimed.9d252b3· last month
Behavioral checks ran but aren't published for this artifact; the static checks above ran at publish time.
Documentation
7 passed2 warningsHomepage or repository declaredwarn
No homepage or repository declared.
Add a "homepage" or "repository" field to SKILL.md.
Documentation shows usagewarn
Documentation has no code examples.
Add at least one fenced example showing a real invocation.
Description quality
24 words · 198 chars — "Use when building Next.js 14+ applications with App Router, server components, o…"
README is present and substantial
168,182 chars · 12 sections · 127 code blocks
Tags / topics declared
20 total — ai, ai-agent, ai-agent-tools, anthropic-claude, claude, claude-ai (+14)
README has usage / example sections
found: Quick Start · Example · Example
Homepage / docs URL declared
no homepage declared (registry will use the repo URL) — info-only, not blocking
Description is substantive
Description is 24 words.
Documentation present and substantive
Documentation present (SKILL.md, 493 words).
Release history
1- releasecurrent9d252b3warnlast month
Contents
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
Reviews
No reviews yet. Be the first.
Related
Verification Before Completion
Evidence before assertions, always
Writing Plans
Turn specs into phased implementation plans
Test-Driven Development
Red → green → refactor discipline for any feature or bugfix
mh install skills/nextjs-developer