nextjs-16-complete-guide

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Next.js 16 Complete Guide

Next.js 16 完整指南

Purpose

用途

Comprehensive reference for Next.js 16's revolutionary features: Cache Components with "use cache", stable Turbopack as default bundler, proxy.ts architecture, DevTools MCP integration, and React Compiler support.

全面介绍 Next.js 16 的革命性特性：带"use cache"的 Cache Components、作为默认打包器的稳定版 Turbopack、proxy.ts 架构、DevTools MCP 集成以及 React Compiler 支持。

When to Use

适用场景

Starting new Next.js projects (use 16 from day one)
Migrating from Next.js 15 to 16
Understanding Cache Components and Partial Pre-Rendering (PPR)
Configuring Turbopack for optimal performance
Migrating middleware.ts to proxy.ts
Leveraging AI-assisted debugging with DevTools MCP
Setting up React Compiler for automatic memoization

启动新的 Next.js 项目（从第一天就使用 16 版本）
从 Next.js 15 迁移到 16
了解 Cache Components 和部分预渲染（PPR）
配置 Turbopack 以获得最佳性能
将 middleware.ts 迁移到 proxy.ts
利用 DevTools MCP 进行 AI 辅助调试
设置 React Compiler 实现自动记忆化

What Changed: Next.js 15 → 16

变更内容：Next.js 15 → 16

The Big Picture

整体概览

Next.js 15 was transition phase - async APIs, experimental Turbopack, changing cache defaults. Next.js 16 is the payoff - everything becomes stable, fast, and production-ready.

Next.js 15 是过渡阶段——异步 API、实验性 Turbopack、不断变化的缓存默认值。 Next.js 16 是成果阶段——所有功能都变得稳定、快速且可用于生产环境。

Key Differences

核心差异

Feature	Next.js 15	Next.js 16
Bundler	Webpack (default), Turbopack (opt-in beta)	Turbopack (default, stable)
Caching	Implicit, confusing defaults	Explicit with "use cache"
Network Layer	middleware.ts (edge runtime)	proxy.ts (Node.js runtime)
DevTools	Basic error messages	MCP integration for AI debugging
React Compiler	Experimental	Stable, production-ready
Performance	Baseline	2-5× faster builds, 10× faster Fast Refresh

特性	Next.js 15	Next.js 16
打包器	Webpack（默认），Turbopack（可选测试版）	Turbopack（默认，稳定版）
缓存	隐式、易混淆的默认规则	显式的"use cache"指令
网络层	middleware.ts（边缘运行时）	proxy.ts（Node.js 运行时）
开发工具	基础错误提示	集成 MCP 支持 AI 调试
React Compiler	实验性	稳定、可用于生产环境
性能	基准水平	构建速度提升 2-5 倍，Fast Refresh 速度提升 10 倍

🚀 Core Features (The 20% That Delivers 80%)

🚀 核心特性（20% 的特性带来 80% 的价值）

1. Cache Components + "use cache"

The Problem in Next.js 15:

Implicit caching was "magic" - hard to predict what cached
Switching between static/dynamic was unclear
Performance optimization felt like guesswork

The Solution in Next.js 16:

typescript

// Enable in next.config.ts
const nextConfig = {
  cacheComponents: true,
};

export default nextConfig;

Usage Pattern:

typescript

// app/dashboard/page.tsx
import { Suspense } from 'react';

// This component caches its output
async function UserMetrics() {
  'use cache'; // 🎯 Explicit caching

  const metrics = await fetchMetrics(); // Cached result

  return <MetricsCard data={metrics} />;
}

// This stays dynamic
async function LiveBalance() {
  const balance = await fetchBalance(); // Always fresh
  return <BalanceWidget balance={balance} />;
}

export default function Dashboard() {
  return (
    <div>
      <Suspense fallback={<LoadingMetrics />}>
        <UserMetrics /> {/* Cached, instant load */}
      </Suspense>

      <LiveBalance /> {/* Dynamic, real-time */}
    </div>
  );
}

Why This Matters:

Instant navigation - Cached parts load immediately
Selective freshness - Only dynamic parts fetch on demand
Predictable behavior - You control what caches
SaaS dashboards - Perfect for panels with mixed static/dynamic content

Cache Granularity:

typescript

// Cache entire page
export default async function Page() {
  'use cache';
  return <PageContent />;
}

// Cache individual component
async function ExpensiveWidget() {
  'use cache';
  return <Chart data={await getData()} />;
}

// Cache function result
async function getStats() {
  'use cache';
  return await database.query('...');
}

Next.js 15 中的问题：

隐式缓存像"魔法"一样——很难预测哪些内容会被缓存
静态/动态切换规则不清晰
性能优化全靠猜测

Next.js 16 中的解决方案：

typescript

// 在 next.config.ts 中启用
const nextConfig = {
  cacheComponents: true,
};

export default nextConfig;

使用模式：

typescript

// app/dashboard/page.tsx
import { Suspense } from 'react';

// 该组件会缓存其输出
async function UserMetrics() {
  'use cache'; // 🎯 显式缓存

  const metrics = await fetchMetrics(); // 缓存结果

  return <MetricsCard data={metrics} />;
}

// 该组件保持动态
async function LiveBalance() {
  const balance = await fetchBalance(); // 始终获取最新数据
  return <BalanceWidget balance={balance} />;
}

export default function Dashboard() {
  return (
    <div>
      <Suspense fallback={<LoadingMetrics />}>
        <UserMetrics /> {/* 已缓存，即时加载 */}
      </Suspense>

      <LiveBalance /> {/* 动态，实时更新 */}
    </div>
  );
}

重要意义：

即时导航 - 缓存部分可立即加载
选择性新鲜度 - 仅动态部分按需获取数据
可预测行为 - 由你控制哪些内容被缓存
SaaS 仪表盘 - 完美适配混合静态/动态内容的面板

缓存粒度：

typescript

// 缓存整个页面
export default async function Page() {
  'use cache';
  return <PageContent />;
}

// 缓存单个组件
async function ExpensiveWidget() {
  'use cache';
  return <Chart data={await getData()} />;
}

// 缓存函数结果
async function getStats() {
  'use cache';
  return await database.query('...');
}

2. Turbopack: Default Bundler (Stable)

2. Turbopack：默认打包器（稳定版）

Performance Numbers (Official Vercel Benchmarks):

2-5× faster production builds
Up to 10× faster Fast Refresh in development
File system caching - Even faster restarts on large projects

No Configuration Needed:

typescript

// next.config.ts
// Turbopack is now default - no config required!

Opt-out (if needed):

bash

undefined

性能数据（Vercel 官方基准测试）：

生产构建速度提升 2-5 倍
开发环境中 Fast Refresh 速度最高提升 10 倍
文件系统缓存 - 大型项目重启速度更快

无需额外配置：

typescript

// next.config.ts
// Turbopack 现在是默认选项 - 无需配置！

可选禁用（如有需要）：

bash

undefined

Use Webpack instead

使用 Webpack 替代

next build --webpack


**File System Caching (Beta):**
```typescript
// next.config.ts
const nextConfig = {
  experimental: {
    turbopackFileSystemCacheForDev: true, // Faster restarts
  },
};

Why This Matters:

Faster feedback loop - See changes instantly (10× faster)
Shorter CI/CD times - 2-5× faster production builds
Better DX - Less waiting, more shipping
Large projects - Scales better than Webpack

What You Notice:

bash

undefined

next build --webpack


**文件系统缓存（测试版）：**
```typescript
// next.config.ts
const nextConfig = {
  experimental: {
    turbopackFileSystemCacheForDev: true, // 更快的重启速度
  },
};

重要意义：

更快的反馈循环 - 即时看到变更（速度提升 10 倍）
更短的 CI/CD 时间 - 生产构建速度提升 2-5 倍
更好的开发体验 - 减少等待，专注交付
大型项目 - 比 Webpack 扩展性更好

直观感受：

bash

undefined

Before (Webpack)

之前（Webpack）

✓ Compiled in 4.2s

✓ 编译完成于 4.2s

After (Turbopack)

之后（Turbopack）

✓ Compiled in 0.4s # 10× faster

---

✓ 编译完成于 0.4s # 速度提升 10 倍

---

3. proxy.ts Replaces middleware.ts

3. proxy.ts 替代 middleware.ts

The Change:

bash

undefined

变更内容：

bash

undefined

Old (Next.js 15)

旧版（Next.js 15）

middleware.ts # Edge runtime, confusing

middleware.ts # 边缘运行时，易混淆

New (Next.js 16)

新版（Next.js 16）

proxy.ts # Node.js runtime, explicit


**Migration Example:**
```typescript
// OLD: middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  return NextResponse.redirect(new URL('/home', request.url));
}

export const config = {
  matcher: '/about/:path*',
};

typescript

// NEW: proxy.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export default function proxy(request: NextRequest) {  // Changed function name
  return NextResponse.redirect(new URL('/home', request.url));
}

export const config = {
  matcher: '/about/:path*',
};

Key Changes:

Rename file:
```
middleware.ts
```
→
```
proxy.ts
```

Rename export:

export function middleware

→

export default function proxy

Runtime: Runs on Node.js (not edge)

Why This Matters:

Clearer boundary - "Proxy" = network entry point
Predictable runtime - Always Node.js, no edge ambiguity
Better debugging - Standard Node.js environment

proxy.ts # Node.js 运行时，语义明确


**迁移示例：**
```typescript
// 旧版：middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  return NextResponse.redirect(new URL('/home', request.url));
}

export const config = {
  matcher: '/about/:path*',
};

typescript

// 新版：proxy.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export default function proxy(request: NextRequest) {  // 函数名称变更
  return NextResponse.redirect(new URL('/home', request.url));
}

export const config = {
  matcher: '/about/:path*',
};

核心变更：

文件重命名：
```
middleware.ts
```
→
```
proxy.ts
```

导出方式变更：

export function middleware

→

export default function proxy

运行时：基于 Node.js（而非边缘运行时）

重要意义：

更清晰的边界 - "Proxy" 明确表示网络入口点
可预测的运行时 - 始终使用 Node.js，无边缘环境歧义
更好的调试体验 - 标准 Node.js 环境

4. DevTools MCP (AI-Assisted Debugging)

4. DevTools MCP（AI 辅助调试）

What It Does: Next.js 16 integrates Model Context Protocol (MCP) so AI agents can:

Read unified browser + server logs
Understand Next.js routing and caching
Access error stack traces automatically
Provide page-aware debugging context

Why This Matters:

AI copilots can debug your Next.js app natively
Faster debugging - AI understands framework internals
Better DX - Agent sees what you see (and more)

Use Case:

You: "Why is this page not caching?"
AI Agent (with MCP):
  - Reads server logs
  - Sees route configuration
  - Checks cache headers
  - Knows Next.js 16 caching rules
  → "You're missing 'use cache' directive in your component"

Integration: Works automatically with Claude Code, Cursor, and other MCP-compatible tools.

功能说明： Next.js 16 集成了 Model Context Protocol (MCP)，使 AI Agent 能够：

读取统一的浏览器 + 服务器日志
理解 Next.js 路由和缓存机制
自动访问错误堆栈跟踪
提供页面感知的调试上下文

重要意义：

AI copilots 可原生调试你的 Next.js 应用
更快的调试速度 - AI 理解框架内部机制
更好的开发体验 - Agent 能看到你所见（甚至更多）

使用场景：

你："为什么这个页面没有被缓存？"
AI Agent（基于 MCP）：
  - 读取服务器日志
  - 查看路由配置
  - 检查缓存头
  - 了解 Next.js 16 缓存规则
  → "你的组件中缺少 'use cache' 指令"

集成情况： 自动兼容 Claude Code、Cursor 等支持 MCP 的工具。

5. React Compiler (Stable)

5. React Compiler（稳定版）

What It Does: Automatically memoizes components - no more manual

useMemo

useCallback

React.memo

Setup:

bash

npm install babel-plugin-react-compiler@latest

typescript

// next.config.ts
const nextConfig = {
  reactCompiler: true,  // Moved from experimental to stable
};

Before (Manual Optimization):

typescript

// You had to do this everywhere
const MemoizedComponent = React.memo(function Component({ data }) {
  const processed = useMemo(() => processData(data), [data]);
  const handleClick = useCallback(() => {
    console.log(processed);
  }, [processed]);

  return <div onClick={handleClick}>{processed}</div>;
});

After (React Compiler Does It):

typescript

// Just write code, compiler optimizes automatically
function Component({ data }) {
  const processed = processData(data);  // Auto-memoized
  const handleClick = () => {            // Auto-memoized
    console.log(processed);
  };

  return <div onClick={handleClick}>{processed}</div>;
}

Why This Matters:

Less boilerplate - Write cleaner code
Better performance - Compiler is smarter than manual optimization
No bugs - Compiler never forgets dependencies

功能说明： 自动记忆化组件 - 无需手动使用

useMemo

、

useCallback

、

React.memo

。

设置方法：

bash

npm install babel-plugin-react-compiler@latest

typescript

// next.config.ts
const nextConfig = {
  reactCompiler: true,  // 从实验性特性转为稳定版
};

之前（手动优化）：

typescript

// 你必须在所有地方这样做
const MemoizedComponent = React.memo(function Component({ data }) {
  const processed = useMemo(() => processData(data), [data]);
  const handleClick = useCallback(() => {
    console.log(processed);
  }, [processed]);

  return <div onClick={handleClick}>{processed}</div>;
});

之后（React Compiler 自动处理）：

typescript

// 只需编写代码，编译器会自动优化
function Component({ data }) {
  const processed = processData(data);  // 自动记忆化
  const handleClick = () => {            // 自动记忆化
    console.log(processed);
  };

  return <div onClick={handleClick}>{processed}</div>;
}

重要意义：

更少的样板代码 - 编写更简洁的代码
更好的性能 - 编译器比手动优化更智能
更少的错误 - 编译器永远不会忘记依赖项

🔥 Breaking Changes (15 → 16)

🔥 重大变更（15 → 16）

Required Changes

必须修改的内容

1. Node.js Version

1. Node.js 版本要求

bash

undefined

bash

undefined

Minimum: Node.js 20.9+

最低要求：Node.js 20.9+

Next.js 15: Node.js 18 worked

Next.js 15：支持 Node.js 18

Next.js 16: Node.js 18 no longer supported

Next.js 16：不再支持 Node.js 18

undefined

undefined

2. Async params & searchParams

2. 异步 params & searchParams

typescript

// ❌ OLD (Next.js 15)
export default function Page({ params, searchParams }) {
  const id = params.id;  // Synchronous
}

// ✅ NEW (Next.js 16)
export default async function Page({ params, searchParams }) {
  const { id } = await params;  // Must await
  const { query } = await searchParams;
}

typescript

// ❌ 旧版（Next.js 15）
export default function Page({ params, searchParams }) {
  const id = params.id;  // 同步调用
}

// ✅ 新版（Next.js 16）
export default async function Page({ params, searchParams }) {
  const { id } = await params;  // 必须使用 await
  const { query } = await searchParams;
}

3. Async cookies(), headers(), draftMode()

3. 异步 cookies(), headers(), draftMode()

typescript

// ❌ OLD
import { cookies } from 'next/headers';

export function MyComponent() {
  const token = cookies().get('token');  // Synchronous
}

// ✅ NEW
import { cookies } from 'next/headers';

export async function MyComponent() {
  const cookieStore = await cookies();  // Must await
  const token = cookieStore.get('token');
}

typescript

// ❌ 旧版
import { cookies } from 'next/headers';

export function MyComponent() {
  const token = cookies().get('token');  // 同步调用
}

// ✅ 新版
import { cookies } from 'next/headers';

export async function MyComponent() {
  const cookieStore = await cookies();  // 必须使用 await
  const token = cookieStore.get('token');
}

4. revalidateTag() Now Requires cacheLife Profile

4. revalidateTag() 现在需要 cacheLife 配置

typescript

// ❌ OLD
revalidateTag('posts');

// ✅ NEW
revalidateTag('posts', 'max');     // Options: 'max', 'hours', 'days'

typescript

// ❌ 旧版
revalidateTag('posts');

// ✅ 新版
revalidateTag('posts', 'max');     // 选项：'max', 'hours', 'days'

5. middleware.ts → proxy.ts

bash

undefined

bash

undefined

Required migration

必须迁移

mv middleware.ts proxy.ts

Update function name

更新 proxy.ts 中的函数名称

export default function proxy(request) { ... }

undefined

export default function proxy(request) { ... }

undefined

Removed Features

已移除的特性

AMP support - Completely removed
next lint
command - Removed
Node.js 18 - No longer supported
TypeScript <5.1 - No longer supported

AMP 支持 - 完全移除
next lint
命令 - 移除
Node.js 18 - 不再支持
TypeScript <5.1 - 不再支持

📦 Migration Guide (Step-by-Step)

📦 迁移指南（分步说明）

1. Pre-Migration Checklist

1. 迁移前检查清单

bash

undefined

bash

undefined

Check current versions

检查当前版本

node --version # Should be 20.9+ npm list next # Current Next.js version npm list react # React version

undefined

node --version # 应升级到 20.9+ npm list next # 当前 Next.js 版本 npm list react # React 版本

undefined

2. Automated Migration

2. 自动化迁移

bash

undefined

bash

undefined

Upgrade to latest Next.js 16

升级到最新版 Next.js 16

npm install next@latest react@latest react-dom@latest

Run codemod (handles most changes automatically)

运行 codemod（自动处理大部分变更）

npx @next/codemod@canary upgrade latest

undefined

npx @next/codemod@canary upgrade latest

undefined

3. Manual Changes

3. 手动修改

Update next.config:

typescript

// next.config.ts
import type { NextConfig } from 'next';

const nextConfig: NextConfig = {
  // Enable Cache Components
  cacheComponents: true,

  // Enable React Compiler
  reactCompiler: true,

  // Optional: File system caching
  experimental: {
    turbopackFileSystemCacheForDev: true,
  },
};

export default nextConfig;

Rename middleware:

bash

undefined

更新 next.config：

typescript

// next.config.ts
import type { NextConfig } from 'next';

const nextConfig: NextConfig = {
  // 启用 Cache Components
  cacheComponents: true,

  // 启用 React Compiler
  reactCompiler: true,

  // 可选：文件系统缓存
  experimental: {
    turbopackFileSystemCacheForDev: true,
  },
};

export default nextConfig;

重命名中间件：

bash

undefined

If you have middleware.ts

如果你有 middleware.ts

git mv middleware.ts proxy.ts

Update function name in proxy.ts

更新 proxy.ts 中的函数名称

export default function proxy(request: NextRequest) { // Your logic }


**Update async APIs:**
```typescript
// Search codebase for:
// - params.
// - searchParams.
// - cookies()
// - headers()
// - draftMode()

// Add await before each

export default function proxy(request: NextRequest) { // 你的逻辑 }


**更新异步 API：**
```typescript

4. Test Everything

在代码库中搜索：

—

- params.

—

- searchParams.

—

- cookies()

—

- headers()

—

- draftMode()

—

为每个调用添加 await

bash

undefined

undefined

Development

4. 全面测试

npm run dev # Should use Turbopack automatically

bash

undefined

Production build

开发环境测试

npm run build # Should be 2-5× faster

npm run dev # 应自动使用 Turbopack

Run tests

生产构建测试

npm test

undefined

npm run build # 速度应提升 2-5 倍

5. Deploy

运行测试用例

bash

undefined

npm test

undefined

Verify Node.js version in production

5. 部署

Deploy to Vercel/platform

—

Monitor for errors in first 24h

—

---

bash

undefined

🎯 Best Practices

验证生产环境的 Node.js 版本

1. Start New Projects with Next.js 16

部署到 Vercel 或其他平台

—

部署后 24 小时内监控错误

bash

npx create-next-app@latest my-app

---

Automatically uses Next.js 16, Turbopack, TypeScript, Tailwind

🎯 最佳实践

—

1. 使用 Next.js 16 启动新项目

undefined

bash

npx create-next-app@latest my-app

2. Use "use cache" Strategically

自动使用 Next.js 16、Turbopack、TypeScript、Tailwind

typescript

// ✅ Good: Cache expensive, infrequent-changing data
async function MonthlyReport() {
  'use cache';
  return await generateReport();
}

// ❌ Bad: Don't cache user-specific real-time data
async function CurrentBalance() {
  'use cache';  // Wrong! This should be fresh
  return await getUserBalance();
}

undefined

3. Monitor Build Performance

2. 策略性使用 "use cache"

bash

undefined

typescript

// ✅ 推荐：缓存开销大、不频繁变更的数据
async function MonthlyReport() {
  'use cache';
  return await generateReport();
}

// ❌ 不推荐：不要缓存用户特定的实时数据
async function CurrentBalance() {
  'use cache';  // 错误！该内容应保持新鲜
  return await getUserBalance();
}

Next.js 16 shows detailed timing

3. 监控构建性能

npm run build

bash

undefined

Example output:

Next.js 16 会显示详细的计时信息

Route (app) Size First Load JS ┌ ○ / 142 B 87.2 kB ├ ○ /_not-found 142 B 87.2 kB └ ○ /dashboard 1.23 kB 88.4 kB

Build time: 14.2s # Was 57s in Next.js 15 with Webpack

undefined

npm run build

4. Leverage DevTools MCP

示例输出：

Use Claude Code / Cursor with MCP support
Let AI agent read Next.js internals
Ask: "Why is my page slow?" - Agent sees server logs

Route (app) Size First Load JS ┌ ○ / 142 B 87.2 kB ├ ○ /_not-found 142 B 87.2 kB └ ○ /dashboard 1.23 kB 88.4 kB

Build time: 14.2s # 在 Next.js 15 + Webpack 中需要 57s

undefined

5. Enable React Compiler for Large Apps

4. 利用 DevTools MCP

typescript

// Only if you have performance issues
reactCompiler: true

使用支持 MCP 的 Claude Code / Cursor
让 AI Agent 读取 Next.js 内部数据
提问："为什么我的页面加载缓慢？" - Agent 会查看服务器日志

📊 When to Upgrade (Decision Matrix)

5. 为大型应用启用 React Compiler

✅ Upgrade Now If:

—

Starting new project (use 16 from day one)
Small/medium codebase (<50 routes)
Using Vercel (tested platform)
Want 2-5× faster builds
Need instant navigation (Cache Components)

typescript

// 仅当存在性能问题时启用
reactCompiler: true

⏳ Wait 1-2 Weeks If:

🔗 资源

Large production app (>100 routes)
Heavy middleware.ts usage (needs proxy.ts migration)
Custom Webpack config
Third-party libs not yet compatible
Risk-averse deployment policy

🚫 Don't Upgrade Yet If:

💡 快速参考

—

安装

Using AMP pages (removed in 16)
Stuck on Node.js 18 (can't upgrade)
Custom build pipelines (need adapter testing)
Experimental features in production

bash

npm install next@latest react@latest react-dom@latest

🔗 Resources

启用特性

typescript

// next.config.ts
const nextConfig = {
  cacheComponents: true,           // 启用 Cache Components
  reactCompiler: true,             // 启用 React Compiler
  experimental: {
    turbopackFileSystemCacheForDev: true,  // 更快的开发环境重启速度
  },
};

💡 Quick Reference

迁移检查清单

Installation

—

bash

npm install next@latest react@latest react-dom@latest

已安装 Node.js 20.9+
执行
```
npm install next@latest
```
运行
```
npx @next/codemod@canary upgrade latest
```
将
```
middleware.ts
```
重命名为
```
proxy.ts
```
为 params/searchParams/cookies/headers 添加
```
await
```
更新
```
revalidateTag()
```
调用，添加 cacheLife 参数
测试构建：
```
npm run build
```
测试开发环境：
```
npm run dev
```
先部署到预发布环境

总结： Next.js 16 兑现了 15 版本的承诺——所有功能都更快、更明确且可用于生产环境。Turbopack 成为默认选项，缓存机制可预测，AI 工具原生集成。这是 2025 年构建现代 SaaS 应用的首选版本。

Enable Features

—

typescript

// next.config.ts
const nextConfig = {
  cacheComponents: true,           // Cache Components
  reactCompiler: true,             // React Compiler
  experimental: {
    turbopackFileSystemCacheForDev: true,  // Faster dev restarts
  },
};

—

Migration Checklist

—

Node.js 20.9+ installed
```
npm install next@latest
```
Run
```
npx @next/codemod@canary upgrade latest
```
Rename
```
middleware.ts
```
→
```
proxy.ts
```
Add
```
await
```
to params/searchParams/cookies/headers
Update
```
revalidateTag()
```
calls with cacheLife
Test build:
```
npm run build
```
Test dev:
```
npm run dev
```
Deploy to staging first

Summary: Next.js 16 delivers on the promises of 15 - everything is faster, more explicit, and production-ready. Turbopack is default, caching is predictable, and AI tooling is native. This is the version to build modern SaaS applications on in 2025.

—