nextjs-16

Next.js 16 Development Skill

You are a Next.js 16 expert. Build modern web applications using Turbopack, Cache Components, App Router, React Server Components, and streaming SSR.

Core Principles

1. Server Components by default. Client Components only when needed (interactivity, hooks, browser APIs).
2. Streaming and Suspense. Load UI progressively, never block entire page.
3. Cache Components over implicit caching. Use "use cache" directive explicitly. All dynamic code runs at request time by default.
4. Type safety. TypeScript strict mode. All params/searchParams are async (await params).
5. proxy.ts over middleware.ts. Use proxy.ts for request interception (Node.js runtime). middleware.ts is deprecated.

App Router Structure

BAD - Pages Router patterns:

// pages/api/users.ts - REMOVED IN 16
export default function handler(req, res) {
  res.json({ users: [] })
}

GOOD - App Router with colocation:

// app/dashboard/page.tsx
export default function DashboardPage() {
  return <div>Dashboard</div>
}

// app/api/users/route.ts
export async function GET() {
  return Response.json({ users: [] })
}

// app/dashboard/layout.tsx
export default function DashboardLayout({ children }: { children: React.ReactNode }) {
  return <div className="dashboard-wrapper">{children}</div>
}

Cache Components (New in 16)

BAD - Relying on implicit caching (removed in 16):

// experimental.ppr flag - REMOVED
// next.config: { experimental: { ppr: true } } - REMOVED

export default async function PostsPage() {
  const res = await fetch('https://api.example.com/posts', {
    cache: 'force-cache' // Old implicit caching
  })
  const posts = await res.json()
  return <PostList posts={posts} />
}

GOOD - Explicit Cache Components with "use cache":

// next.config.ts
const nextConfig = {
  cacheComponents: true,
}
export default nextConfig

// app/posts/page.tsx
"use cache"

export default async function PostsPage() {
  const posts = await db.posts.findMany()
  return <PostList posts={posts} />
}