# Nextjs Developer

Use when building Next.js 14+ applications with App Router, server components, or...

- Repository: https://github.com/Jeffallan/claude-skills (12164 stars)
- Category: DevOps
- License: MIT
- Last updated: 2026-10-30
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add Jeffallan/claude-skills --skill nextjs-developer -g -a claude-code -y`
Codex: `npx skills add Jeffallan/claude-skills --skill nextjs-developer -g -a codex -y`
Cursor: `npx skills add Jeffallan/claude-skills --skill nextjs-developer -g -a cursor -y`
Gemini CLI: `npx skills add Jeffallan/claude-skills --skill nextjs-developer -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add Jeffallan/claude-skills`

## Description

Use when building Next.js 14+ applications with App Router, server components, or server actions. Invoke to configure route handlers, implement middleware, set up API routes, add streaming SSR, write generateMetadata for SEO, scaffold loading.tsx/error.tsx boundaries, or deploy to Vercel. Triggers on: Next.js, Next.js 14, App Router, RSC, use server, Server Components, Server Actions, React Server Components, generateMetadata, loading.tsx, Next.js deployment, Vercel, Next.js performance.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Next.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.

## Core Workflow

1. **Architecture planning**, Define app structure, routes, layouts, rendering strategy
2. **Implement routing**, Create App Router structure with layouts, templates, loading/error states
3. **Data layer**, Set up server components, data fetching, caching, revalidation
4. **Optimize**, Images, fonts, bundles, streaming, edge runtime
5. **Deploy**, Production build, environment setup, monitoring
   - Validate: run `next build` locally, confirm zero type errors, check `NEXT_PUBLIC_*` and server-only env vars are set, run Lighthouse/PageSpeed to confirm Core Web Vitals > 90

## 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

The rest: https://github.com/Jeffallan/claude-skills/blob/HEAD/skills/nextjs-developer/SKILL.md