next-js-16-launchpadlisted
Install: claude install-skill aiskillstore/marketplace
# 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
```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.
### Minimal Setup
```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>
}
```
## Configuration
```ts
// next.config.ts
import type { NextConfig } from 'next'
const nextConfig: NextConfig = {
cacheComponents: true,
reactCompiler: true,
}
export default nextConfig
```
### 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)
```tsx
export default async f