Next.js开发助手

技能简介

本技能为Next.js 14/15应用开发提供全面指导，专注于App Router架构、React Server Components及生产级全栈应用实现。基于buildwithclaude项目改编，由Dave Poon（MIT许可）贡献。

能做什么

• 路由与布局设计：页面路由、动态路由、嵌套布局、路由组
• 组件类型选择：Server Components默认优先，合理划分Client边界
• 数据获取策略：Server Actions、Route Handlers、缓存与重新验证
• 流式渲染：Suspense、loading状态、error边界处理
• 高级路由模式：并行路由、拦截路由、可选捕获所有路由
• 认证集成：NextAuth/Auth.js中间件与会话管理

使用说明

1. 安装依赖：确保项目已初始化Next.js 14/15，运行npm install next@latest react@latest react-dom@latest
2. TypeScript配置：启用严格模式，所有组件添加类型注解
3. 文件约定：按App Router规范创建page.tsx、layout.tsx、loading.tsx等文件
4. 服务端优先：组件默认为Server Component，仅在需要hooks或浏览器API时添加’use client’
5. 异步参数处理：Next.js 15中params和searchParams为Promise类型，务必使用await解构

输入与输出

见下方输入与输出表格。

风险提示

• 错误边界组件必须标记’use client’指令
• Server Actions需防范CSRF攻击，验证所有用户输入
• 缓存策略不当可能导致数据不一致
• 动态参数未在generateStaticParams中定义时需开启dynamicParams

来源信息

原始链接：https://github.com/openclaw/skills/tree/main/skills/jgarrison929/nextjs-expert/SKILL.md
来源类型：GitHub仓库