SuperAPI AI 工具集

next.js 16 app router

前端与建站

查看项目

更新于 10-15 17:27

技能介绍

用途:本技能适用于 Next.js 16 App Router 相关开发,覆盖服务端组件、客户端组件、API 路由、Server Actions、中间件与缓存模式;不涵盖 Pages Router、部署细节和框架内部实现。

主要能力与原则:默认使用服务端组件,在组件中直接 async/await 取数据;仅在需要交互(hooks、事件处理)时使用客户端组件并添加 'use client'。变更操作用 Server Actions 并加 'use server'。使用 Next.js 16 的 use cache 指令做组件级显式缓存,用 revalidatePath 和 revalidateTag 失效缓存。异步数据加载配合 Suspense 边界,非紧急更新用 useTransition,昂贵计算用 useDeferredValue。路由处理器使用 route.ts 文件并具名导出 GET、POST 等方法。

必要用法与约束:必须默认服务端组件、标记 Server Actions、变更后调用 revalidatePath 或 revalidateTag、在服务端组件中把 searchParams 当作 Promise 处理(Next.js 15+)。建议对不阻塞 UI 的重更新用 useTransition,仅在昂贵操作(1000+ 项)时用 useDeferredValue 配合 useMemo,用路由组 (group) 组织目录而不影响 URL。应避免不必要的 useMemo/useCallback、对静态内容使用客户端组件、错误混用服务端与客户端组件模式,以及暂缓使用 React Compiler。

假设条件:Next.js 16+、Node.js 20.9+、TypeScript 5.1+、React 19+(完整特性)、Turbopack(默认打包器)。

适用场景与协作:可用于以 drizzle-orm 访问数据库、与 ai-sdk-ui 搭配构建聊天界面,以及借助 typescript 保障类型安全。

限制:资料未提供安装命令、具体版本升级步骤、定价与部署细节;示例代码仅为模式说明,实际功能与效果暂未提供。