关于 nextjs-expert
nextjs-expert 是基于 App Router 规范构建 Next.js Web 应用的技能，指导开发者处理渲染、数据获取、缓存、路由及部署模式，以构建高性能且利于 SEO 的应用。
主要功能
- 01App Router 结构与路由
- 02Server Components 与数据获取
- 03缓存与 ISR 指导
- 04路由处理器与 Server Actions
- 05流式渲染与加载边界
适用场景
- 01规划 Next.js App Router 项目结构
- 02选择服务端与客户端渲染模式
- 03实现 API 和表单变更
- 04改善页面加载与缓存行为
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/nextjs-expert确认已加载。
详细介绍
Next.js 专家
经验丰富的 Next.js 架构师，精通 App Router 范式、服务端渲染策略和生产环境部署模式。本技能为使用 Next.js 14+ 约定构建高性能、SEO 友好的 Web 应用提供指导，涵盖 Server Components、Streaming，以及各种数据获取和缓存机制。
核心原则
- 默认优先使用 Server Components；只有在组件需要浏览器 API、事件处理程序或 React 状态时，才添加 "use client"
- 利用 app/ 目录结构，其中每个文件夹片段都映射到一个 URL 路由，并使用 layout.tsx 实现共享 UI，使用 page.tsx 提供独有内容
- 在服务端层使用异步 Server Components 和遵循 Next.js 缓存语义的 fetch 来设计数据获取
- 使用 generateStaticParams 在构建时对动态路由进行静态预渲染；对于长尾页面，则回退到按需 ISR
- 通过将逻辑移入 Server Components，并对大型客户端专用库使用动态导入，保持客户端代码包精简
技术
- 使用 app/[segment]/page.tsx 组织路由，并通过路由组（圆括号）进行组织，而不影响 URL 路径
- 在每个路由片段设置 loading.tsx 和 error.tsx 边界，以提供即时加载状态和优雅的错误恢复
- 使用 Route Handlers（app/api/.../route.ts）以及导出的 GET、POST、PUT、DELETE 函数实现 API 端点
- 在项目根目录的 middleware.ts 中配置中间件，并使用 matcher 配置拦截请求，以进行身份验证、重定向或注入标头
- 使用 next/image 优化图片（自动 srcSet、延迟加载、AVIF/WebP），并使用 next/font 优化字体（零布局偏移、自托管子集）
- 通过在 fetch 调用中返回 revalidate 值，或使用 revalidatePath/revalidateTag 按需失效缓存，以启用 ISR
- 根据部署目标，在 next.config.js 中配置 redirects、rewrites、headers 和适用的实验性选项
常见模式
- 并行路由：在布局中使用 @named 插槽，同时渲染多个页面级组件，以实现仪表板和分屏视图
- 拦截路由：使用 (..) 约定放置路由，使导航时显示模态框，同时保留直接 URL 作为完整页面
- Server Actions：使用 "use server" 定义异步函数，以处理表单提交和数据变更，无需构建独立的 API 路由
- 使用 Suspense 进行流式传输：将数据获取缓慢的组件包裹在 Suspense 边界中，以渐进式传输 HTML 并改善 TTFB
应避免的陷阱
- 不要在 Server Components 中使用 useEffect 获取数据；应直接在组件主体中获取，或使用服务端工具函数
- 除非每个子组件都确实需要客户端交互，否则不要在布局级别放置 "use client"，因为这会使整个子树退出服务端渲染
- 不要混淆 Pages Router（pages/ 目录）的模式与 App Router 约定；两者的数据获取和路由模型不同
- 不要忽略设置适当的缓存标头和重新验证时间，因为过时的数据和不必要的重新渲染会损害性能和用户体验
评论
支持 Markdown