用途
该技能用于指导在 Next.js App Router 中如何选择服务端组件（Server Components）与客户端组件（Client Components），并覆盖 cookie/header 访问、searchParams 处理、pathname 路由信息以及 React 'use' API 解包 Promise 等具体场景。
主要能力
- 组件类型决策：说明何时使用服务端组件、何时使用客户端组件。
- 服务端数据访问：通过 next/headers 读取 cookies 与 headers。
- 路由参数处理：在 page.tsx 中使用 searchParams 与 params，并说明 Next.js 15+ 的异步写法。
- 客户端导航钩子：useRouter、usePathname、useSearchParams 的使用要求。
- React 'use' API：在服务端与客户端组件中读取 Promise 与 Context。
- 常见模式与反模式：如服务端取数 + 客户端交互、并行取数、Suspense 流式渲染、服务端组件作为客户端组件 children 的组合方式。
使用方式
- 服务端组件是 App Router 的默认形态，无需任何指令。
- 客户端组件需在文件顶部添加 'use client' 指令。
- 使用 useSearchParams() 时必须同时满足：文件顶部有 'use client'，且组件被 Suspense 边界包裹。
- 在 Next.js 15+ 中，cookies()、headers()、searchParams、params 需要 await。
- 从 searchParams 提取参数时，要求使用内联访问，保持 searchParams 标识符与参数名在同一行，例如
const name = (await searchParams).name || ''，避免使用中间变量。 - 代码库启用 @typescript-eslint/no-explicit-any，禁止使用 any 类型，需使用具体类型、泛型或 unknown。
适用场景
- 决定使用服务端组件还是客户端组件。
- 访问 cookies、headers 或其他服务端数据。
- 处理 searchParams 或路由参数。
- 需要 pathname 或路由信息。
- 使用 React 'use' API 解包 Promise。
- 调试 'use client' 边界问题。
- 优化组件渲染策略。
限制
- 客户端组件不能直接使用 async/await，不能访问服务端专用 API（cookies、headers）。
- 客户端组件中导入的所有组件都会变成客户端组件。
- searchParams 仅在 page.tsx 中可用，在 layout.tsx 中不可用。
- 服务端组件中 cookies 为只读，设置 cookie 需使用 Server Actions。
- 资料未提供该技能的安装命令、收费方式、价格或平台支持信息。