Next.js Full Stack Claude Skill — Claude That Knows App Router by Default

Next.js 13+ introduced the App Router — a fundamentally different way to build Next.js applications. But Claude's default responses often mix App Router and Pages Router patterns, use outdated conventions, or miss the nuances of server components vs client components.

The Next.js Full Stack Skill fixes this permanently. Install it and Claude writes App Router code correctly — server components by default, client components only when needed, API routes structured the right way.

What the Next.js Full Stack Skill Covers

App Router fundamentals — layout.tsx, page.tsx, loading.tsx, error.tsx conventions, nested layouts, route groups, parallel routes.

Server vs client components — when to add "use client", how to pass data from server to client, how to avoid unnecessary client component boundaries.

Data fetching patterns — fetch() in server components, unstable_cache, revalidatePath, revalidateTag, React cache.

API routes — Route Handler conventions, request/response typing, middleware patterns.

TypeScript conventions — proper typing for params, searchParams, generateMetadata, and server action arguments.

Styling — Tailwind CSS utility patterns, CSS modules where appropriate, shadcn/ui component usage.

Authentication — NextAuth.js or Firebase Auth integration patterns for App Router.

The Problem Without This Skill

Without context, Claude makes these common mistakes in Next.js App Router projects:

• Writes getServerSideProps — which doesn't exist in App Router
• Puts "use client" on every component unnecessarily
• Uses useRouter from next/router instead of next/navigation
• Misses generateMetadata for SEO and uses the old Head component instead
• Creates API routes with the old req, res handler signature instead of Request, Response

These are not Claude's fault — it needs context about which version of Next.js and which router you are using. The skill provides that context automatically.

How to Install the Next.js Full Stack Skill

1. Visit rohansurve.in/rohankit/skills/nextjs-fullstack for the full install guide
2. In your project terminal run:

npx skills add nextjs-fullstack

1. The SKILL.md is created in your project root
2. Claude Code reads it at the start of every session

Customise for Your Specific Stack

After installing, open SKILL.md and add your project-specific details:

• Your database — Neon PostgreSQL, Supabase, PlanetScale, MongoDB
• Your auth setup — NextAuth, Firebase, Clerk, custom JWT
• Your component library — shadcn/ui, Radix, Chakra, custom
• Your deployment target — Vercel, Railway, self-hosted
• Your specific environment variables and their purposes

The more specific you make the skill, the more accurately Claude writes code for your exact project.

Works Great Alongside Other RohanKit Skills

• Code Review Skill — Claude reviews your Next.js code like a senior engineer
• API Documentation Skill — generates clean docs from your Route Handlers
• Git Commit Messages Skill — consistent commit messages from your Next.js diffs
• TDD Skill — test-driven development for Next.js components and API routes
• CLAUDE.md Generator Skill — scans your Next.js project and generates a custom CLAUDE.md

All free at rohansurve.in/rohankit.

Claude That Knows Your Stack From Line One

The Next.js Full Stack Skill means Claude stops defaulting to generic or outdated patterns and starts writing code that fits your actual project. Install it in every Next.js project and the quality difference is immediate.