Agent skill · software engineering · aiskillstore
next-js-16-launchpad
Next.js 16 with Turbopack, Cache Components, and proxy.ts. Use for bootstrapping, migrating, and building with App Router and React 19.
Why this skill is useful
Provides specific patterns and configurations for Next.js 16 with Turbopack that the AI wouldn't reliably generate on its own.
What it needs
Requires node.js, react, typescript installed locally. About 4k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
Next.js 16 Launchpad Next.js 16: Turbopack default (2-5× faster builds), Cache Components ('use cache'), and proxy.ts for explicit control. When to Use ✅ Next.js 16, Turbopack, Cache Components, proxy migration, App Router, React 19.2 ❌ Pages Router, Next.js ≤15, generic React questions Requirements Tool Version ------ --------- Node.js 20.9.0+ TypeScript 5.1.0+ React 19.2+ Quick Start Recommended: TypeScript, ESLint, Tailwind, App Router, Turbopack, @/ alias. Minimal Setup Configuration v15 → v16 Changes v15 v16 ----- ----- experimental.turbopack Default experimental.ppr cacheComponents middleware.ts (Edge) proxy.ts (Node) Sync params await params Core Patterns 1. Server Components (Default) 2. Cache Components 3. Client Components 4. Proxy Boundary 5. Cache Tags + Server Actions 6. Streaming with Suspense Key Concepts 1. Turbopack - Rust bundler, incremental compilation, Fast Refresh 2. Server Components - Default in app/, zero client JS 3. Client Components - 'use client', hooks, browser APIs 4. Cache Components - 'use cache' + cacheLife() for PPR 5. Proxy Boundary - proxy.ts for auth/rewrites/redirects 6. Partial Pre-Rendering - Static shell + dynamic streaming Migration Checklist 1. Async Request APIs Update: const { slug } = await params 2. middleware.ts → proxy.ts Rename file, export proxy Node runtime only (not Edge) 3. Config updates Remove experimental. flags Enable cacheComponents, reactCompiler Remove serverRuntimeConfig/publicRuntimeConfig 4. Cache Components Replace experimental.ppr with cacheComponents: true Wrap dynamic sections with <Suspense> 5. Images Configure images.localPatterns for query strings See references/nextjs16-migration-playbook.md for complete guide. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/next-js-16-launchpad