SuperAPI AI 工具集

nextjs-app-router-mastery

前端与建站

查看项目

更新于 10-15 19:58

技能介绍

用途:面向 Next.js 14+ App Router 的开发技能,整理服务端组件、数据获取与路由组织等模式,帮助按 App Router 约定搭建应用。

主要能力:默认服务端组件(除非标记 'use client');Streaming 与 Suspense 渐进渲染;并行路由与拦截路由(模态模式);文件约定 layout.tsx、page.tsx、loading.tsx、error.tsx、not-found.tsx、route.ts、template.tsx、default.tsx;服务端组件内直接 fetch;用 Promise.all 并行取数;Server Actions('use server'、revalidatePath);Route Handlers(GET/POST 返回 NextResponse.json);缓存策略(dynamic 的 force-dynamic/force-static、revalidate、按 fetch 的 next.revalidate、revalidatePath/revalidateTag);静态与动态 metadata、generateMetadata。

使用方式:按 app/ 目录约定放置文件;服务端组件中直接 await 取数,避免 useEffect;异步组件放入 Suspense 并配 fallback;表单提交调用 Server Action 后按需 revalidatePath;API 用 route.ts 导出 HTTP 方法。

适用场景:需要服务端渲染、流式加载、并行路由或模态拦截的 Next.js 应用。

限制:资料未提供安装命令、版本要求、收费与平台信息;示例代码为模式示意,实际依赖(如数据库、fetchPosts 等)需自行实现。