Nextjs
Scaffold and troubleshoot Next.js 16 App Router apps with Server Components, Cache Components, and proxy.ts without hitting documented async-params and caching pitfalls.
Overview
Nextjs is an agent skill for the Build phase that teaches Next.js 16 App Router, Cache Components, and Server Actions while preventing documented async-params and caching errors.
Install
npx skills add https://github.com/jezweb/claude-skills --skill nextjsWhat is this skill?
- Covers Next.js 16.1.1 with React 19.2, Node 20.9+, and proxy.ts replacing classic middleware naming
- Documents Cache Components with "use cache" plus revalidateTag, updateTag, and refresh APIs
- Server Components, Server Actions, route handlers, and streaming composition patterns
- Prevents 25+ documented errors including async route params Promise types and parallel route 404s
- Notes Turbopack, i18n caching, and navigation throttling troubleshooting paths
- Targets Next.js 16.1.1 and React 19.2.0
- Documents 25+ prevented errors and cites 65–70% token savings versus unstructured doc paste
- Notes 3 CVEs patched in Next.js 16.1.1
Adoption & trust: 1k installs on skills.sh; 841 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You are on Next.js 16 and keep tripping over Promise-typed params, cache directive mistakes, and parallel-route 404s that generic React advice does not cover.
Who is it for?
Indie developers building SaaS or marketing sites on Next.js 16 who want one skill to encode framework-specific guardrails.
Skip if: Pure static HTML projects, mobile-native stacks, or teams standardized on Remix or Nuxt without a Next migration plan.
When should I use this skill?
Building Next.js 16 projects or troubleshooting async params, use cache directives, parallel route 404s, Turbopack, i18n caching, or navigation throttling.
What do I get? / Deliverables
Your agent produces App Router–correct layouts, actions, and cache invalidation patterns aligned with Next.js 16.1 so fewer rebuild cycles burn solo-builder time.
- Route and layout files following App Router conventions
- Server Actions and cache invalidation snippets aligned with Next.js 16 APIs
Recommended Skills
Journey fit
Next.js implementation work sits squarely in build when you are shipping UI and server boundaries for a web product. Frontend subphase covers App Router layouts, Server Actions, route handlers, and React 19 patterns this skill documents.
How it compares
Skill package with curated error prevention, not a hosted MCP or the official Next.js docs search alone.
Common Questions / FAQ
Who is nextjs for?
Solo and small-team builders using Claude Code, Cursor, or Codex to implement Next.js 16 web apps with App Router and modern caching APIs.
When should I use nextjs?
During the build/frontend phase when creating routes, Server Actions, or cache components, or when troubleshooting async params, use cache directives, Turbopack, or i18n caching issues.
Is nextjs safe to install?
It is documentation and pattern guidance under MIT license; review the Security Audits panel on this page and pin Next.js patch versions noted in the skill when upgrading production.
SKILL.md
READMESKILL.md - Nextjs
{ "name": "nextjs", "description": "Build Next.js 16 apps with App Router, Server Components/Actions, Cache Components (use cache), and async route params. Includes proxy.ts and React 19.2. Prevents 25 documented errors. Use when: building Next.js 16 projects, or troubleshooting async params (Promise types), use cache directives, parallel route 404s, Turbopack issues, i18n caching, navigation throttling.", "version": "1.0.0", "author": { "name": "Jeremy Dawes", "email": "jeremy@jezweb.net" }, "license": "MIT", "repository": "https://github.com/jezweb/claude-skills", "keywords": [], "commands": "./commands/" } # Next.js App Router - Production Patterns **Version**: Next.js 16.1.1 | **React**: 19.2.0 | **Node.js**: 20.9+ **Production Tested**: ✅ | **Token Savings**: 65-70% | **Errors Prevented**: 18+ **Last Updated**: 2026-01-03 | **Security**: 3 CVEs patched in 16.1.1 --- ## What This Skill Provides This skill provides production-ready patterns for **Next.js 16 App Router**, including: - ✅ **Next.js 16 breaking changes** (async params, proxy.ts, parallel routes) - ✅ **Cache Components** with `"use cache"` directive (NEW) - ✅ **Updated caching APIs**: `revalidateTag()`, `updateTag()`, `refresh()` (NEW) - ✅ **Server Components** (data fetching, streaming, composition) - ✅ **Server Actions** (forms, mutations, validation, error handling) - ✅ **Route Handlers** (API endpoints, webhooks, streaming) - ✅ **Proxy patterns** (`proxy.ts` replaces `middleware.ts`) - ✅ **Parallel Routes & Route Groups** - ✅ **React 19.2 features** (View Transitions, `useEffectEvent()`, React Compiler) - ✅ **Metadata API** (SEO, Open Graph, sitemaps) - ✅ **Image & Font optimization** (`next/image`, `next/font`) - ✅ **Turbopack configuration** (stable in Next.js 16) - ✅ **Performance patterns** (lazy loading, code splitting, PPR) - ✅ **TypeScript configuration** --- ## When to Use This Skill **Use this skill when you need**: - Next.js App Router patterns (any deployment platform) - Server Components best practices - Server Actions for forms and mutations - Cache Components with `"use cache"` - Migration from Next.js 15 to 16 - React 19.2 integration patterns - Performance optimization with Turbopack - SEO with Metadata API **Platform Support**: Works with **Vercel, Cloudflare Workers, AWS, self-hosted, or any deployment platform**. --- ## When NOT to Use This Skill **Do NOT use this skill for**: - **Cloudflare Workers deployment** → Use `cloudflare-nextjs` skill instead - **Pages Router** → This skill is App Router only (Pages Router is legacy) - **Authentication** → Use `clerk-auth`, `better-auth` skills - **Database integration** → Use `cloudflare-d1`, `drizzle-orm-d1` skills - **UI components** → Use `tailwind-v4-shadcn` skill - **State management** → Use `zustand-state-management`, `tanstack-query` skills --- ## Auto-Trigger Keywords This skill should be used when the user mentions: ### Next.js Core - next.js app router - app router patterns - next.js 16 - nextjs 16 - next.js app directory - app directory patterns ### Server Components - next.js server components - server components patterns - nextjs server components - rsc patterns - react server components next.js - server component data fetching - server component streaming - suspense next.js - streaming next.js ### Server Actions - next.js server actions - server actions patterns - server actions forms - nextjs server actions - form handling next.js - server mutations next.js - revalidate next.js - server action validation ### Cache Components (NEW in Next.js 16) - cache components next.js - use cache directive - "use cache" next.js - partial prerendering next.js - ppr next.js - next.js caching - revalidateTag next.js - updateTag next.js - cache invalidation next.js ### Route Handlers - next.js route handlers - route handlers api - app router api routes - next.js api endpoints - api routes app router - route.ts next.js - route handler patterns ### Pr