| name | next-js-16-launchpad |
| description | Next.js 16 with Turbopack, Cache Components, and proxy.ts. Use for bootstrapping, migrating, and building with App Router and React 19. |
| version | 1.1.0 |
| trigger_keywords | ["next.js 16","turbopack","cache components","proxy.ts"] |
| license | MIT |
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
npx create-next-app@latest my-app
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
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>{children}</body>
</html>
)
}
export default function Page() {
return <h1>Hello, Next.js 16!</h1>
}
Configuration
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)
export default async function BlogPage() {
const res = await fetch('https://api.example.com/posts')
const posts = await res.json()
return <PostList posts={posts} />
}
2. Cache Components
import { 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} />
}
3. Client Components
'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>
)
}
4. Proxy Boundary
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()
}
5. Cache Tags + Server Actions
'use cache'
cacheLife('hours')
cacheTag('blog-posts')
export default async function BlogList() {
const posts = await db.posts.findMany()
return <PostList posts={posts} />
}
'use server'
import { updateTag } from 'next/cache'
export async function createPost(data: PostData) {
await db.posts.create(data)
updateTag('blog-posts')
}
6. Streaming with Suspense
export 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>
}
Key Concepts
- Turbopack - Rust bundler, incremental compilation, Fast Refresh
- Server Components - Default in
app/, zero client JS
- Client Components -
'use client', hooks, browser APIs
- Cache Components -
'use cache' + cacheLife() for PPR
- Proxy Boundary -
proxy.ts for auth/rewrites/redirects
- Partial Pre-Rendering - Static shell + dynamic streaming
Migration Checklist
-
Async Request APIs
npx @next/codemod@canary async-request-api
Update: const { slug } = await params
-
middleware.ts → proxy.ts
- Rename file, export
proxy
- Node runtime only (not Edge)
-
Config updates
- Remove
experimental.* flags
- Enable
cacheComponents, reactCompiler
- Remove
serverRuntimeConfig/publicRuntimeConfig
-
Cache Components
- Replace
experimental.ppr with cacheComponents: true
- Wrap dynamic sections with
<Suspense>
-
Images
- Configure
images.localPatterns for query strings
See references/nextjs16-migration-playbook.md for complete guide.
Common Pitfalls
❌ 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
Decision Guide
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
Production Patterns
E-commerce
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>
</>
)
}
Authenticated Dashboard
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.
Performance
- Keep Turbopack enabled (opt-out with
--webpack only if needed)
- Parallelize fetches with
Promise.all
- Use
<Suspense> for streaming boundaries
- Enable file system cache for large repos
Security
- Use
server-only package + React Taint API
- Keep auth in
proxy.ts
- Validate inputs in Server Actions
- Gate env vars with
NEXT_PUBLIC_ prefix
- Extract cookies/headers before cached scopes
Deployment
- Vercel: Zero-config
- Docker/Node:
output: 'standalone'
- Monitor build times (2-5× speedup expected)
- Configure cache lifecycles to match CDN
Reference Files
- references/nextjs16-reference.md - Install/config/checklists
- references/nextjs16-migration-playbook.md - Migration guide with codemods
- references/nextjs16-advanced-patterns.md - Streaming, caching, auth patterns
- references/NEXTJS_16_COMPLETE_GUIDE.md - Complete documentation
- scripts/bootstrap-nextjs16.ps1 - Automated setup script
- assets/app-router-starter/ - Reference implementation
Resources
Version: 1.1.0 | Updated: 2025-12-27
