# ⚡ 技能：next16-专家 ## 描述 Next.js 16.1.1 和 React 19.2 生态系统的高级专家。此技能重点关注高性能**代理和缓存**范例、**部分预渲染 (PPR)** 以及从“middleware.ts”到“proxy.ts”的强制转换。它为现代全栈开发提供了生产就绪模式。 ## 目录 1. 快速入门 2. 代理革命（`proxy.ts`） 3.统一缓存（`使用缓存`） 4.React 19.2 模式 5. 数据获取和变异 6. 组件设计和单一职责 7.“不要”列表（反模式） 8. 高级参考 ** ** ## 快速入门初始化一个精英级项目： npx create-next-app@latest my-elite-app \ --打字稿\ --顺风\ --eslint \ --应用程序\ --src-dir \ --导入别名“@/*” **精英配置（`next.config.ts`）：** 从“next”导入类型{NextConfig}；常量 nextConfig: NextConfig = { 实验：{ ppr: true, // 启用部分预渲染 dynamicIO: true, // Next.js 16 的新 IO 优化 reactCompiler: true, // 稳定的 React 编译器支持 }, 记录：{ 获取：{ 完整网址：真实， }, }, }; 导出默认的nextConfig； ** ** ## 代理革命 (`proxy.ts`) 在 Next.js 16 中，**`middleware.ts` 是遗留的**。所有全局网络逻辑必须驻留在“proxy.ts”中。这稳定了运行时并为所有请求提供了一个干净的入口。 **标准精英代理（`src/app/proxy.ts`）：** 从'next/server'导入{nextProxy}；导出默认 nextProxy(异步（请求）=> { const url = request.nextUrl; // 全局路由逻辑 if (url.pathname.startsWith('/api/v1')) { // 在代理级别标准化 API 版本控制 } // 安全标头和请求装饰 request.headers.set('X-Elite-Engine', '16.1.1'); const 响应 = 等待获取（请求）； // 性能监控 response.headers.set('服务器计时', '精英;dur=20'); 返回响应； }); _要深入了解 A/B 测试和高级安全性，请参阅[proxy-deep-dive.md]()。_ ** ** ## 统一缓存（`使用缓存`） Next.js 16 引入了“use cache”指令，用显式的函数级缓存取代了“revalidatePath”的复杂性。 **缓存数据服务（`src/services/data.ts`）：** 从'next/cache'导入{cacheLife，cacheTag}；导出异步函数 getGlobalMetrics() { '使用缓存'；缓存寿命（60）； // 缓存60秒 cacheTag('指标'); const data = wait fetch('https://api.internal/metrics').then(r => r.json()); 返回数据； } **失效模式：** * `revalidateTag('metrics')`：立即清除。 * `updateTag('metrics')`：**推荐**。标记为过时并在后台重新验证 (SWR)。 _复杂的缓存策略请参见[unified-caching.md]()._ ** ** ## React 19.2 模式利用 Next.js 16 中 React 19.2 的稳定性来消除样板文件。 ### 1\.表单的“useActionState” 消除客户端组件中的手动加载和错误状态。 '使用客户端'；从'react'导入{useActionState}；从'@/actions/auth'导入{signUpAction}；导出函数 SignUpForm() { const [状态，操作，isPending] = useActionState(signUpAction, null); 返回（ <表单动作={动作}> <输入名称=“电子邮件”类型=“电子邮件”必需/> {state?.errors?.email &&

{state.errors.email}

} <按钮已禁用={isPending}> {正在等待？ “正在处理...”：“注册”} ）； } ### 2\. `` 组件用于预渲染后台选项卡或隐藏 UI，无需性能成本。从“反应”导入{活动}；导出函数 TabSystem({ activeTab }) { 返回（ <> <活动模式={activeTab === 'home' ? '可见' : '隐藏'}> <主页标签/> <活动模式={activeTab === '设置' ? '可见' : '隐藏'}> <设置选项卡/> ）； } ** ** ## 数据获取和变异 ### 服务器优先方法 (RSC) 80% 的数据应该在服务器组件中获取。 // 应用程序/仪表板/page.tsx 从'@/services/data'导入{getGlobalMetrics}；导出默认异步函数 Page() { const 指标 = 等待 getGlobalMetrics(); // 直接、缓存调用返回（

仪表板

{JSON.stringify(metrics, null, 2)}

）； } ### 服务器操作（突变）所有 POST/PATCH/DELETE 操作均强制执行。 // 操作/auth.ts '使用服务器'；从'next/cache'导入{updateTag}；导出异步函数signUpAction（prevState：any，formData：FormData）{ const email = formData.get('email'); 尝试{ 等待 db.user.create({ 数据: { 电子邮件 } }); updateTag('用户'); // 后台重新验证返回 { 成功：真 }; } 捕获 (e) { return { error: { email: '无效的电子邮件' } }; } } ** ** ## 组件设计和单一职责 * **300 行规则** ：将组件文件保持在 300 行以下。如果组件超出此范围，请提取子组件或将逻辑移动到“hooks/”或“services/”。 * **Hydration Guard** ：始终保护依赖于仅浏览器状态的组件。 '使用客户端'；从 'react' 导入 { useState, useEffect }; 导出函数 SafeClientComponent({ 儿童 }) { const [已安装，setMounted] = useState(false); useEffect(() => setMounted(true), []); if (!mounted) return

; // 占位符返回<>{孩子}； } ** ** ## “不要”列表（反模式） * **不要使用`middleware.ts`**：使用`proxy.ts`。 `middleware.ts` 在 Next.js 16 中被认为是遗留的且性能较低。 * **不要使用 `revalidatePath` 进行简单的 UI 更新**：在服务器操作中使用 `updateTag` 以获得更好的 UX (Stale-While-Revalidate)。 * **不要毫无悬念地访问 RSC 中的 cookie** ：访问 `cookies()` 或 `headers()` 会使路由动态化。将依赖组件包装在 `` 中以保持页面的其余部分静态 (PPR)。 * **不要对组件使用桶文件（`index.ts`）**：这会杀死树摇动并使包膨胀。直接从组件文件导入。 * **不要硬编码 API URL** ：使用环境变量和 `proxy.ts` 层来管理环境。 ** ** ## 高级参考 * [代理深度探索]() — 高级路由和安全性。 * [统一缓存]() — 掌握`use cache`指令。 * [React Expert]() — 用于深度性能优化。 * [Supabase Expert]() — 用于后端和身份验证集成。 ** ** _针对 Next.js 16.1.1 和 React 19.2 进行了优化。更新时间：2026 年 1 月 22 日 - 14:36_

下一页16位专家

包含技能