SuperAPI AI 工具集

nextjs-16

前端与建站

查看项目

更新于 10-16 04:35

技能介绍

用途:该技能用于在 Next.js 16 的 App Router(app/ 目录)下开发时提供模式参考,涉及 Server Components 与 Client Components、Server Actions、Route Handlers 等场景。

主要能力:整理 App Router 文件约定,如 layout.tsx、page.tsx、loading.tsx、error.tsx、not-found.tsx、路由组 (auth)、私有目录 _components 及 app/api/route.ts。说明 Next.js 16 中 middleware.ts 已弃用,改用 proxy.ts 处理请求边界逻辑;proxy.ts 运行于 Node.js 运行时,不能配置为 Edge,且应保持 matcher 精简,排除 api、静态文件和图片资源。

使用方式:Server Components 默认异步,无需指令;Server Actions 使用 "use server",配合 revalidatePath、redirect;数据获取可用 Promise.all 并行与 Suspense 流式渲染;缓存重验证使用 revalidatePath 做路由级失效、revalidateTag 做跨路由标签失效;启用 Cache Components 时 "use cache" 仅用于纯服务端缓存函数。Route Handlers 在 app/api/**/route.ts 中导出 GET、POST 等,适合健康检查、webhook、BFF 端点和服务端代理调用。proxy.ts 在根级导出 proxy 函数与 config.matcher。元数据可用静态 metadata 或 generateMetadata。server-only 包用于标记仅服务端模块。

适用场景:在 Next.js 16 App Router 项目中开发页面、API、鉴权跳转、缓存与数据获取逻辑时参考。

限制:资料未提供安装命令、版本兼容范围、收费信息及具体性能效果;示例代码仅作模式说明,实际使用需结合项目配置。