用途
该技能用于解决 Next.js 中「根据 URL 中的标识符加载数据」这一常见需求。当页面需要依据当前 URL 路径中的标识符（如产品 ID、文章 slug、订单号）来获取并展示对应数据时，应使用此模式。典型场景包括：产品、文章或用户的详情页（/products/{id}、/blog/{slug}）；深入查看某个选中资源的管理后台（/admin/orders/{orderId}）；带嵌套路径的文档或知识库（/docs/getting-started/installation）。如果需求要求数据随当前 URL 路径变化，则路由段必须是动态的（如 [id]、[slug]、[...slug]）。
主要能力
该技能给出了一套推荐实现步骤：1. 创建动态文件夹 app/[id]/page.tsx；2. 访问参数 const { id } = await params;；3. 使用该标识符获取数据；4. 渲染请求的信息。同时指出常见陷阱：使用 app/page.tsx 无法访问按路径区分的标识符。
技能还总结了若干关键规则：
- 文件夹名必须使用方括号。正确示例：app/[id]/page.tsx、app/[productId]/page.tsx、app/[slug]/page.tsx；错误示例：app/id/page.tsx（无方括号即静态路由）、app/page.tsx（无法在此访问 params）。
- 这是服务端组件（默认）。正确写法无需 'use client'；错误做法是为服务端组件添加 'use client'。
- Next.js 15+ 中 params 必须 await。正确写法将 params 类型标注为 Promise<{ id: string }> 并 await；旧版（Next.js 14 及更早，已弃用）无需 await。
- 保持简单，不要过度嵌套。除非需求明确要求 /products/[id]，否则保持顶层结构 app/[id]/page.tsx。
使用方式
技能提供了完整的实现示例，包括服务端组件中 await params、使用 ID 调用 fetch、返回 JSX 渲染数据。还给出了文件结构与 URL 映射说明：/123 → params = { id: '123' }，/abc → params = { id: 'abc' }，/product-xyz → params = { id: 'product-xyz' }。
在 TypeScript 方面，技能强调该代码库启用了 @typescript-eslint/no-explicit-any，使用 any 会导致构建失败。应定义明确类型（如 interface Product），或在类型确实未知时使用 unknown 并配合类型守卫。
技能还列出了常见变体：不同参数名（[productId]、[slug]）、多参数（app/[category]/[id]/page.tsx，params 类型为 Promise<{ category: string; id: string }>）。
完整工作示例展示了一个产品详情页：定义 Product 接口，await params 获取 id，使用 fetch 请求 https://api.example.com/products/${id} 并设置 cache: 'no-store'，检查 response.ok，将响应解析为 Product 类型，最后渲染名称、描述、价格和库存状态。
适用场景
适用于需要根据 URL 标识符加载数据的详情页、后台资源页、文档页等。技能末尾提供了发布前的快速检查清单：路由文件夹使用方括号；组件保持服务端（无需 'use client'）；Next.js 15+ 中 params 类型为 Promise<{ id: string }>；await params 并安全读取标识符；数据获取逻辑使用该标识符；渲染时适当处理加载/错误状态；类型明确，绝不回退到 any。
限制
该技能为微技能，仅覆盖简单的「pathname ID fetch」模式。对于 catch-all 路由（[...slug]）、可选 catch-all 路由（[[...slug]]）、复杂多参数路由、高级路由架构和详细路由决策，应使用更全面的 nextjs-dynamic-routes-params 技能。对于「按 URL 中的 ID 获取数据」这一简单场景，本技能已足够。