# Next.js 知识补丁 (15.3 – 16.x) Claude 培训截止后发布的 Next.js 功能的补充知识。涵盖版本 15.3 至 16.1（2025 年 4 月至 2026 年 1 月）。 ## 请求拦截：`proxy.ts` Next.js 16 将“middleware.ts”替换为“proxy.ts”。重命名该文件并导出“代理”函数而不是“中间件”。默认在 Node.js 运行时运行。 // proxy.ts（项目根目录）从 'next/server' 导入 { NextRequest, NextResponse }; 导出函数代理（请求：NextRequest）{ 返回 NextResponse.next(); } `middleware.ts` 仍然有效（Edge 运行时），但已被弃用并将被删除。 > **15.5 注意**：在完整的 `proxy.ts` 转换之前，中间件通过 `export const config = { runtime: 'nodejs' }` 获得了稳定的 Node.js 运行时支持。 ## 缓存：`“使用缓存”`和缓存组件 Next.js 16 引入了选择加入缓存模型。默认情况下，所有动态代码都在请求时运行 - 缓存不再是隐式的。启用： // next.config.ts 常量 nextConfig: NextConfig = { 缓存组件：true， }; 应用“use cache”指令来缓存页面、组件或函数。编译器自动生成缓存键： “使用缓存”；导出默认异步函数 CachedPage() { const data = 等待 fetchData(); 返回

{数据}

; } 替换“experimental.ppr”和“experimental.dynamicIO”。完成部分预渲染故事 - 通过 Suspense 具有动态孔的静态外壳，完全选择加入。有关详细的缓存 API 模式和代码示例，请参阅 **`references/caching.md`**。 ### 缓存 API 快速参考应用程序接口 |背景 |语义 |使用案例 ---|---|---|--- `更新标签（标签）` |仅服务器操作 |阅读您所写的内容（立即）|表单、用户设置 `刷新()` |仅服务器操作 |仅刷新未缓存的数据 |通知计数、实时指标 `revalidateTag（标签，个人资料）` |任何服务器上下文 | SWR（最终一致性）|静态内容失效 **突破**：`revalidateTag()` 现在需要一个 `cacheLife` 配置文件作为第二个参数（`'max'`、`'hours'`、`'days'` 或 `{ expire: N }`）。 ## 导航挂钩 (15.3+) **`onNavigate`** — `` 上的支持。仅在 SPA 导航期间触发（并非所有点击）。调用 `e.preventDefault()` 来取消。 { if (hasUnsavedChanges) e.preventDefault(); }}> 仪表板 **`useLinkStatus`** — 来自 `next/navigation` 的钩子。返回“{pending: boolean }”。必须在 `` 后代内部使用。模仿 React 的 `useFormStatus`。 '使用客户端'；从 'next/navigation' 导入 { useLinkStatus }；函数 LinkSpinner() { const { 待处理 } = useLinkStatus(); 退货待定？ <旋转器/>：空； } // 转到 ## TypeScript (15.5+) ### 路线道具类型助手自动生成的 `PageProps`、`LayoutProps`、`RouteContext` 类型 — 全局可用，无需导入： // app/blog/[slug]/page.tsx — 无需手动输入导出默认异步函数 Page({ params }: PageProps) { const { slug } = 等待参数；返回<文章>{slug}; } ### 类型化路线编译时路由验证 - 从实验性变为稳定： // next.config.ts const nextConfig: NextConfig = { typedRoutes: true }; 无效的“”路径会导致 TypeScript 错误。适用于 Webpack 和 Turbopack。 ### `下一个类型生成` 用于 CI 验证的独立类型生成，无需运行 dev/build：下一个 typegen && tsc --noEmit ## 文件约定文件|自从 |目的 ---|---|--- `代理.ts` | 16.0 |请求拦截（替换`middleware.ts`） `instrumentation-client.js|ts` | 15.3 | 15.3客户端监控/分析——在应用程序代码之前运行并行路由中的“default.js” | 16.0 | **所有插槽都需要**，否则构建失败 ## 配置参考配置 |目的|自从 ---|---|--- `cacheComponents：true` |启用“使用缓存”\+ PPR | 16.0 `reactCompiler：true` | React 编译器（是“实验性的”）| 16.0 `typedRoutes: true` |类型化路线（是“实验性”）| 15.5 `turbopack：{ ... }` | Turbopack 配置（原为“experimental.turbo”）| 15.3 Turbopack 是默认捆绑程序 |使用 `--webpack` 标志选择退出 | 16.0 **删除了配置**：`experimental.ppr`、`experimental.dynamicIO`、`serverRuntimeConfig`、`publicRuntimeConfig`（使用`.env`文件）、`devIndicators`选项。 ## 工具变更 * **`next lint` 已删除** (16.0) — 直接使用 ESLint CLI 或 Biome。 Codemod：`npx @next/codemod@latest next-lint-to-eslint` * **`next typegen`** (15.5) — CI 的独立类型生成 * **Turbopack FS 缓存** — 稳定，并且默认为 16.1 中的“next dev”启用 ## React 19.2（通过应用程序路由器，16.0+）这些是通过 App Router 的 React Canary 通道提供的 React 级别的 API。请参阅 [React 19.2 文档]() 了解完整的使用详细信息。 * `` — 在转换过程中为元素设置动画 * `useEffectEvent()` — 从 Effects 中提取非反应性逻辑到稳定函数中 * `` — 隐藏 UI（`display: none`），同时保留状态并清理效果 ## 重大变更 (16.0) 有关完整的迁移详细信息和代码示例，请参阅 **`references/migration-guide.md`**。 * **Node.js 20.9+**、TypeScript 5.1+、Chrome/Edge/Firefox 111+、Safari 16.4+ * **强制执行异步 API** ：`await params`、`await searchParams`、`await cookies()`、`await headers()` — 同步访问现在出现错误 * **并行路由** ：所有插槽都需要显式的“default.js”，否则构建失败 * **删除**：AMP、“下一个 lint”、链接上的“legacyBehavior”、“serverRuntimeConfig”/“publicRuntimeConfig” * **图像默认值** : `images.qualities` → `[75]`、`minimumCacheTTL` → 14400s、查询字符串需要 `localPatterns`、`dangerouslyAllowLocalIP` 阻止本地 IP ## 其他资源 ### 参考文件 * **`references/caching.md`** — 详细的“使用缓存”、“updateTag()”、“refresh()”、“revalidateTag()”模式以及代码示例 * **`references/migration-guide.md`** — 完成 Next.js 16 个重大更改、删除和迁移步骤

Nextjs知识补丁

包含技能