用途:这是一个面向 Next.js 14+ App Router 的开发参考技能,用于在创建页面、编写 API 端点、实现实时数据推送时提供模式示例与代码片段。
主要能力:
- 路由处理器(API 路由):在 app/api/[resource]/route.ts 中创建端点,示例包含用 Zod 校验查询参数、解析 bbox 坐标、数据库查询及排序限制,并返回统一 JSON。
- 服务端发送事件(SSE):通过 ReadableStream 实现无 WebSocket 的实时推送,示例包含连接确认事件、定时轮询更新、断开时的清理,以及关闭 nginx 缓冲等响应头设置。
- 客户端组件:用 'use client' 指令标记,示例展示在 useEffect 中初始化地图并接入状态管理。
- 服务端组件(默认):页面默认按服务端组件处理,示例在服务端获取初始数据后传给子组件。
- 动态路由:app/incidents/[id]/page.tsx 示例按参数查询单条记录,不存在时调用 notFound()。
- 加载与错误状态:loading.tsx 提供骨架屏式占位,error.tsx 作为客户端错误边界接收 error 与 reset 并支持重试。
- 路由段配置:dynamic = 'force-dynamic' 关闭静态生成,revalidate 设置重新验证间隔。
- 常见模式:请求体用 Zod 校验,响应统一为 data/count、error、201 创建等结构,并按需设置 Cache-Control。
使用方式:资料以代码片段形式给出,未提供安装命令或配置文件;示例依赖 Next.js 的 next/server、zod、数据库查询与地图库(如 maplibre-gl)、状态管理库等,具体依赖安装与项目初始化方式暂未提供。
适用场景:构建带 API 端点、实时更新与地图展示的 Next.js App Router 应用,例如事件指挥中心、监控面板类界面。
限制:资料为模式示例,示例中的数据库、地图与状态管理代码并非完整可运行实现;未提供版本兼容细节、性能与安全说明;安装、部署与测试步骤暂未提供。