Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →Next.js 16 with Turbopack, Cache Components, and proxy.ts. Use for bootstrapping, migrating, and building with App Router and React 19.
.claude/skills/aiskillstore-next-js-16-launchpad/SKILL.md| Test case | Without → With | Effect | Δ tokens | Δ turns |
|---|---|---|---|---|
| case-01 | ✗→✓ | ▲ Improved | 52% | 0% |
| case-03 | ✗→✓ | ▲ Improved | 73% | 0% |
| case-18 | ✗→✓ | ▲ Improved | 195% | 0% |
| case-04 | ✓→✓ | ＝ Same ✓ | 113% | 0% |
| case-05 | ✓→✓ | ＝ Same ✓ | 15% | 0% |
Next.js 16: Turbopack default (2-5× faster builds), Cache Components ('use cache'), and proxy.ts for explicit control.
✅ Next.js 16, Turbopack, Cache Components, proxy migration, App Router, React 19.2
❌ Pages Router, Next.js ≤15, generic React questions
| Tool | Version | |------|---------| | Node.js | 20.9.0+ | | TypeScript | 5.1.0+ | | React | 19.2+ |
bash# New project npx create-next-app@latest my-app # Upgrade existing npx @next/codemod@canary upgrade latest npm install next@latest react@latest react-dom@latest
Recommended: TypeScript, ESLint, Tailwind, App Router, Turbopack, @/* alias.
tsx// app/layout.tsx export default function RootLayout({ children }: { children: React.ReactNode }) { return ( <html lang="en"> <body>{children}</body> </html> ) }
tsx// app/page.tsx export default function Page() { return <h1>Hello, Next.js 16!</h1> }
ts// next.config.ts import type { NextConfig } from 'next' const nextConfig: NextConfig = { cacheComponents: true, reactCompiler: true, } export default nextConfig
| v15 | v16 | |-----|-----| | experimental.turbopack | Default | | experimental.ppr | cacheComponents | | middleware.ts (Edge) | proxy.ts (Node) | | Sync params | await params |
tsxexport default async function BlogPage() { const res = await fetch('https://api.example.com/posts') const posts = await res.json() return <PostList posts={posts} /> }
tsximport { cacheLife } from 'next/cache' export default async function BlogPage() { 'use cache' cacheLife('hours') const posts = await fetch('https://api.example.com/posts').then(r => r.json()) return <PostList posts={posts} /> }
tsx'use client' import { useState } from 'react' export default function Counter() { const [count, setCount] = useState(0) return ( <div> <p>Count: {count}</p> <button onClick={() => setCount(count + 1)}>+</button> </div> ) }
ts// app/proxy.ts export function proxy(request: NextRequest) { if (!request.cookies.get('auth') && request.nextUrl.pathname.startsWith('/dashboard')) { return NextResponse.redirect(new URL('/login', request.url)) } return NextResponse.next() }
tsx// app/blog/page.tsx 'use cache' cacheLife('hours') cacheTag('blog-posts') export default async function BlogList() { const posts = await db.posts.findMany() return <PostList posts={posts} /> }
ts// app/actions.ts 'use server' import { updateTag } from 'next/cache' export async function createPost(data: PostData) { await db.posts.create(data) updateTag('blog-posts') }
tsxexport default function Dashboard() { return ( <div> <Suspense fallback={<Skeleton />}> <RevenueCard /> </Suspense> <Suspense fallback={<Skeleton />}> <UsersCard /> </Suspense> </div> ) } async function RevenueCard() { const data = await db.analytics.revenue() return <div>{data}</div> }
app/, zero client JS'use client', hooks, browser APIs'use cache' + cacheLife() for PPRproxy.ts for auth/rewrites/redirectsbash npx @next/codemod@canary async-request-api Update: const { slug } = await params
proxyexperimental.* flagscacheComponents, reactCompilerserverRuntimeConfig/publicRuntimeConfigexperimental.ppr with cacheComponents: true<Suspense>images.localPatterns for query stringsSee references/nextjs16-migration-playbook.md for complete guide.
❌ Mixing 'use cache' with runtime APIs (cookies(), headers()) ❌ Missing <Suspense> when Cache Components enabled ❌ Tilde Sass imports under Turbopack ❌ Running proxy.ts on Edge runtime
✅ Read cookies/headers first, pass as props to cached components ✅ Wrap dynamic children in <Suspense> ✅ Use standard Sass imports ✅ Use Node runtime for proxy
Enable Cache Components? → Yes for static/semi-static content → No for fully dynamic dashboards
Where does auth live? → proxy.ts for cross-route checks → Route handlers for API-specific logic
When to use 'use client'? → Only when you need hooks, state, or browser APIs → Keep presentational components server-side
tsx// Product page with streaming export default async function Product({ params }) { const { id } = await params const product = await db.products.findById(id) return ( <> <ProductInfo product={product} /> <Suspense fallback={<ReviewsSkeleton />}> <Reviews productId={id} /> </Suspense> </> ) }
ts// proxy.ts export function proxy(request: NextRequest) { const session = request.cookies.get('session') if (!session && request.nextUrl.pathname.startsWith('/dashboard')) { return NextResponse.redirect(new URL('/login', request.url)) } }
See references/nextjs16-advanced-patterns.md for more blueprints.
--webpack only if needed)Promise.all<Suspense> for streaming boundariesserver-only package + React Taint APIproxy.tsNEXT_PUBLIC_ prefixoutput: 'standalone'Version: 1.1.0 | Updated: 2025-12-27
| Case | Status | Duration (ms) | Turns | Tokens | Tool calls | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Without | With | Δ | Without | With | Δ | Without | With | Δ | Without | With | Δ | ||
case-01 | fail→pass | 19,583 | 21,949 | +12% | 1 | 1 | 0% | 3,670 | 5,578 | +52% | 0 | 0 | — |
case-02 | fail→fail | 18,229 | 17,779 | -2% | 1 | 1 | 0% | 4,098 | 5,188 | +27% | 0 | 0 | — |
case-03 | fail→pass | 16,916 | 13,414 | -21% | 1 | 1 | 0% | 2,147 | 3,705 | +73% | 0 | 0 | — |
case-04 | pass→pass | 18,203 | 20,310 | +12% | 1 | 1 | 0% | 2,333 | 4,976 | +113% | 0 | 0 | — |
case-05 | pass→pass | 16,512 | 13,139 | -20% | 1 | 1 | 0% | 2,869 | 3,311 | +15% | 0 | 0 | — |
case-06 | pass→pass | 14,492 | 14,915 | +3% | 1 | 1 | 0% | 2,477 | 3,827 | +55% | 0 | 0 | — |
case-07 | pass→pass | 15,447 | 8,360 | -46% | 1 | 1 | 0% | 1,583 | 3,493 | +121% | 0 | 0 | — |
case-08 | pass→pass | 7,365 | 6,045 | -18% | 1 | 1 | 0% | 1,256 | 3,113 | +148% | 0 | 0 | — |
case-09 | pass→pass | 15,081 | 6,515 | -57% | 1 | 1 | 0% | 1,713 | 3,184 | +86% | 0 | 0 | — |
case-10 | pass→pass | 18,541 | 38,703 | +109% | 1 | 1 | 0% | 3,426 | 5,243 | +53% | 0 | 0 | — |
case-11 | pass→pass | 23,300 | 23,991 | +3% | 1 | 1 | 0% | 2,252 | 3,922 | +74% | 0 | 0 | — |
case-12 | pass→pass | 4,480 | 11,350 | +153% | 1 | 1 | 0% | 759 | 2,973 | +292% | 0 | 0 | — |
case-13 | pass→pass | 22,386 | 21,602 | -4% | 1 | 1 | 0% | 3,218 | 5,355 | +66% | 0 | 0 | — |
case-14 | pass→pass | 21,813 | 12,211 | -44% | 1 | 1 | 0% | 2,856 | 4,217 | +48% | 0 | 0 | — |
case-15 | pass→pass | 19,111 | 11,923 | -38% | 1 | 1 | 0% | 2,420 | 4,489 | +85% | 0 | 0 | — |
case-16 | pass→pass | 9,259 | 2,547 | -72% | 1 | 1 | 0% | 754 | 2,517 | +234% | 0 | 0 | — |
case-17 | pass→pass | 16,193 | 12,950 | -20% | 1 | 1 | 0% | 2,802 | 4,535 | +62% | 0 | 0 | — |
case-18 | fail→pass | 10,576 | 9,241 | -13% | 1 | 1 | 0% | 962 | 2,838 | +195% | 0 | 0 | — |
case-19 | pass→pass | 7,191 | 10,415 | +45% | 1 | 1 | 0% | 1,216 | 2,959 | +143% | 0 | 0 | — |
case-20 | pass→pass | 17,795 | 16,378 | -8% | 1 | 1 | 0% | 2,435 | 4,281 | +76% | 0 | 0 | — |
case-21 | pass→pass | 15,746 | 8,545 | -46% | 1 | 1 | 0% | 1,886 | 3,672 | +95% | 0 | 0 | — |
case-22 | pass→pass | 16,149 | 15,217 | -6% | 1 | 1 | 0% | 2,202 | 3,980 | +81% | 0 | 0 | — |
DecimalAI ran this skill against gemini-3.6-flash twice over the same eval suite — once with the skill loaded and once without — and compared the two runs case by case. 22 cases were attempted. The headline lift of +14 percentage points is the difference between those two pass rates over the 22 comparable cases.
Without the skill loaded, the model failed this case. With it loaded, the same prompt on the same model passed. This is one improved case from the latest verified run; every case, including any that regressed, is in the table above.
Other measured skills in the registry, with their headline benchmark lift.