Next.js 15 App Router with Claude Code: The 2026 Full-Stack Frontend Guide

nextjs-best-practices (40,062 GitHub stars, skills.sh registry) is the foundational Next.js skill for Claude Code in 2026 — covering data-fetching conventions, caching strategy, and App Router file structure. Next.js 15 has made the App Router + React Server Components the default for every new project. The Skillselion catalog tracks 20+ Next.js-specific skills across 66,520 total listings and 94.6 million total installs.

What makes the Next.js 15 App Router different from Pages Router?

The App Router, introduced in Next.js 13 and fully stable in v15, routes through an app/ directory where every component is a React Server Component (RSC) by default. RSCs render on the server and send HTML to the client — no JavaScript bundle overhead for the component itself. Client components, marked with "use client", are opt-in.

Key App Router primitives:

• Layouts (layout.tsx) — shared UI that persists across navigation without re-mounting
• Loading states (loading.tsx) — automatic Suspense boundaries for streaming
• Error boundaries (error.tsx) — isolated error handling per route segment
• Server Actions — async functions that run server-side, called directly from client components

The nextjs-app-router-patterns skill (36,507 GitHub stars, skills.sh registry) encodes idiomatic patterns for all of these, so Claude Code generates correct App Router code rather than Pages Router anti-patterns converted naively.

Is Turbopack ready for production in 2026?

Yes. Turbopack is the default bundler for next dev in Next.js 15, and it is production-grade. The nextjs-turbopack skill (210,333 GitHub stars, skills.sh registry) wraps the Turbopack project which the Vercel team benchmarks at up to 76% faster local server startup and 96% faster code updates on large projects compared to Webpack.

With Claude Code, pairing nextjs-turbopack in your skill context means the agent understands Turbopack's module resolution differences and avoids generating code that silently breaks — the most common migration complaint from Webpack-era projects.

How does Claude Code generate correct App Router code?

The recommended skill stack for Next.js 15 with Claude Code:

1. `nextjs-app-router-patterns` (36,507 stars, skills.sh) — enforces Server Component defaults and routing patterns 2. `nextjs-best-practices` (40,062 stars, skills.sh) — applies Next.js team conventions for next/cache, revalidatePath, and revalidateTag 3. `shadcn` (193,352 installs, skills.sh) — generates components that coexist with Server Components without accidental "use client" sprawl 4. `tailwind` (70,626 installs, skills.sh) — utility-first styles that work in both server and client components

This stack eliminates the "accidental client island" problem — where overusing "use client" negates server rendering benefits. See how to design a UI with Claude Code for the UI generation workflow, and the Tailwind v4 design system guide for the styling layer.

What App Router patterns trip up AI code generators?

Three patterns cause the most AI-generated bugs in Next.js 15 projects:

1. Async Server Components. Next.js 15 makes async/await in Server Components idiomatic for data fetching. AI agents without the right skill revert to useEffect, forcing the component into the client boundary unnecessarily and adding a loading waterfall.

2. Parallel and intercepting routes. The @folder convention for parallel slots and (.) syntax for intercepting routes (modal patterns) are non-obvious. Without nextjs-app-router-patterns, Claude Code generates useState-based modal workarounds instead of the correct @modal slot pattern.

3. `next/cache` and revalidation. Pages Router used getServerSideProps props for fresh data. App Router uses fetch() with { next: { revalidate: 60 } } and revalidatePath('/path') in Server Actions. Getting this wrong produces stale data with no visible error. The nextjs-cache-architecture skill (skills.sh registry) encodes the correct caching model for Claude Code.

How does authentication work in the App Router?

The nextjs-supabase-auth skill (40,062 GitHub stars, skills.sh registry) and auth0-nextjs (skills.sh) teach Claude Code the App Router authentication flow. The correct pattern places session validation in middleware.ts at the project root — running at the edge before any page renders — which eliminates the client-side redirect flash common in older Pages Router patterns.

For full-stack apps, nextjs-supabase-auth pairs edge authentication with Supabase Row Level Security, giving Claude Code a complete pattern from login through database access without the session management pitfalls that plagued client-side auth.

How does Next.js 15 fit with the rest of the frontend stack?

The 2026 frontend stack that pairs best with Claude Code:

• Next.js 15 (framework + SSR)
• `tailwind` (70,626 installs — utility CSS)
• `shadcn` (193,352 installs — component ownership)
• `nextjs-app-router-patterns` (36,507 stars — routing conventions)
• TypeScript (enforced by nextjs-react-typescript, skills.sh)

This is the stack that appears in more Claude Code sessions in the Skillselion catalog than any other combination in the build/frontend subphase (3,762 skills indexed).

See best design system skills for Claude Code and figma to code workflow for how design handoff fits this stack.

Key takeaways

• Next.js 15 makes App Router + React Server Components the default; the Skillselion catalog tracks 20+ Next.js skills (66,520 total listings, 94.6M installs)
• nextjs-best-practices (40,062 stars) and nextjs-app-router-patterns (36,507 stars) are the two foundational skills for correct App Router code generation with Claude Code
• Turbopack (nextjs-turbopack, 210,333 stars) is stable and cuts local build time up to 76% vs Webpack
• Pair with shadcn (193,352 installs) and tailwind (70,626 installs) for a complete component + styling stack
• Three AI pitfalls to avoid: async Server Components without skill context, parallel route patterns, and stale cache from wrong revalidation API

External resources: Next.js App Router docs · Turbopack docs

Common questions