Next.js Project Rules
Cursor 项目级规则模板，为 Next.js 16 App Router 项目配置最佳编码实践、文件结构和组件规范。
【AI技能】Next.js Project Rules：功能详解与安装指南
技能简介
Next.js 生态更新迭代极快，从 Pages Router 到 App Router，再到 React Server Components、Server Actions 等新范式，团队在构建项目时很容易陷入“规范不统一”、“组件滥用”或“文件结构混乱”的泥潭。Next.js Project Rules 正是为解决这些痛点而生——它是专为 Cursor 编辑器设计的一组项目级规则模板，深度适配 Next.js 16 App Router，能在你编写代码时自动注入最佳实践、文件结构约定和组件规范。
简单来说，只要你在 Cursor 中启用了这套规则，AI 助手就会像一个熟悉你团队规范的“老员工”一样，生成的代码天然符合 Next.js 最新推荐模式：自动使用 Server Components 而非盲目 Client Components，建议合理的路由组织方式，遵循数据获取的缓存策略……你不再需要每次手动写一堆注释或反复修改 AI 的“胡思乱想”。对于新建项目或维护中的 Next.js 项目，这套规则都能显著提升开发效率与代码一致性，尤其在多人协作场景下，它就像是项目的“宪法”，让 AI 从一开始就走在正确的路上。
核心优势
专为 Next.js 16 App Router 量身打造
规则内置了 App Router 的目录结构最佳实践（路由组、并行路由、拦截路由、loading/error 文件命名等），以及 React 19 下的 Server Components / Client Components 边界判断逻辑。AI 生成代码时不会再用旧的 Pages Router 方式，而是直接产出符合最新版本的代码。统一团队编码规范，降低协作摩擦
团队新成员加入时，不必再花半天阅读项目文档、记忆命名约定。只要在 Cursor 中启用这套规则，AI 自动输出符合团队风格的代码，代码评审时格式和模式上的“口水仗”大幅减少。内置常见陷阱防范与性能优化建议
比如自动提示不要在 Server Components 中直接使用useEffect，或提醒在客户端组件中按需加载next/dynamic。AI 生成的代码会主动避开新手容易踩的坑，并给出理由，相当于每位开发者都有一位 Next.js 专家在身边。与 Cursor 深度集成，零学习成本
不需要安装额外工具或插件，只需将规则文件放入项目根目录，Cursor 便会自动读取并作用于所有 AI 交互。AI 的建议、补全、代码生成全部遵守规则，体验顺滑。高度可定制，适应不同项目复杂度
模板本身提供了合理的“基础版”，但你可以根据实际需求增删改规则——比如修改组件导出风格（默认导出 vs 命名导出）、调整文件命名规则（kebab-case vs PascalCase），甚至添加公司特有的业务约束。
主要功能
| 功能 | 说明 |
|---|---|
| App Router 文件结构规范 | 自动建议并检查路由组、布局文件、模板文件、并行/拦截路由的放置位置，防止文件丢失或命名错误 |
| 服务端/客户端组件边界识别 | 根据文件是否在 _components 或 use client 标注，自动判断组件角色，正确分离客户端交互逻辑 |
| 数据获取与缓存策略 | 强制优先使用 fetch 的 cache: 'force-cache' 或 next: { revalidate }，并提醒避免在 Server Actions 中直接调用 API |
| 组件命名与导出约定 | 要求函数组件使用 PascalCase，统一默认导出 vs 命名导出的选择（可配置），并禁止在服务端组件中使用 useState 等客户端挂钩 |
| 样式方案适配 | 提供 Tailwind CSS + CSS Modules 的典型配置规则，自动阻止在 page.tsx 中直接使用内联样式，推荐可复用的样式类 |
| API 路由与中间件规范 | 提示路由处理函数采用标准 NextRequest / NextResponse 类型，并约束中间件文件位置与作用范围 |
如何获取与安装
Next.js Project Rules 以 Cursor 项目级规则 的形式应用，无需安装额外包，只需配置一个 .cursorrules 文件。以下是两种推荐方式：
方式一：一键从社区模板仓库获取（推荐）
- 访问社区维护的规则模板仓库（例如 GitHub 上搜索
cursor-rules-nextjs，或直接从 Cursor 官方规则市场下载）。 - 将
cursor-rules-nextjs文件夹中的.cursorrules文件复制到你的 Next.js 项目根目录。 - 重启 Cursor 或重新加载窗口（
Cmd + Shift + P→Reload Window），规则即生效。
方式二：手动创建并配置
如果你希望从零开始搭建或只想引用部分规则，可以手动创建 .cursorrules 文件。在项目根目录执行：
touch .cursorrules
然后使用任意编辑器（如 VS Code、Cursor 自身）打开该文件，粘贴你自定义的规则内容。一个最简单的规则示例（片段）如下：
You are an expert in Next.js 16 with App Router.
Follow these conventions:
- Use default export for page layouts.
- Use named exports for utility functions.
- Avoid `useEffect` and `useState` in Server Components.
- Always place `loading.tsx` and `error.tsx` in the same route folder.
- When using fetch, prefer `cache: 'force-cache'` unless dynamic data required.
方式三：通过 Cursor 设置界面添加
- 在 Cursor 中打开命令面板 (
Cmd + Shift + P)，输入Rules: Open Rules File。 - 选择 “Project Rules”，系统会自动创建（或打开）项目下的
.cursorrules文件。 - 粘贴模板内容并保存。
小提示：
.cursorrules文件会与项目代码一同版本控制，推荐首次提交到 Git，确保团队所有成员共享同一套规则。
适用场景
- 新建 Next.js 16 App Router 项目：在
create-next-app之后立刻引入规则，AI 从一开始就产出规范代码，避免后期重构。 - 团队协作开发：多人同时开发，AI 生成的代码风格统一，代码审查效率提升 50% 以上，尤其适合远程团队。
- 从 Pages Router 迁移到 App Router：迁移过程中 AI 会遵循新路由范式，避免混用旧 API，同时自动提醒遗留代码的修改方向。
- 教育与培训：新手学习 Next.js 时，打开规则相当于有个“导师”实时纠正常见错误，加速学习曲线。
- 大型项目中的模块标准化：不同开发者在处理不同模块时，AI 输出的文件结构一致，降低跨模块理解成本。
小贴士
- 规则文件要版本控制：将
.cursorrules加入 Git 仓库，并定期更新（建议跟随 Next.js 版本升级，比如从 16.0 到 16.1 时检查规则是否需要微调）。 - 按项目特性裁剪规则：模板只是一个起点，如果你的项目使用了单独的
getServerSideProps或特定 CSS 方案（如 styled-components），请相应修改规则，避免 AI 给出矛盾建议。 - 利用 Cursor 的“规则调试”功能：当 AI 生成代码不符合预期时，用
Ctrl + I打开聊天并询问 “Why did you do this?”，AI 会引用当前规则说明原因，帮助你判断是规则不完善还是理解偏差。
免责声明：技能效果可能因 Cursor 版本和项目配置而异，请以官方文档为准。本文介绍的规则模板为社区最佳实践集合，使用时请结合团队实际情况调整。