AI编码
dev.to ·
@Vildanden
面向 Next.js App Router 的最小化 AGENTS.md 与 Cursor 规则配置
文章指出编码 Agent 不了解 Next.js 代码库约定,可能引入第二套路由、把数据获取移到浏览器端或暴露环境变量,因此建议用 AGENTS.md、CLAUDE.md 和 Cursor 项目规则组成分层的最小规则集,而非大段指令堆砌。内容包括保持 App Router、优先 Server Components、共享 UI 与领域逻辑的目录约定等基线规则,并附有免费样例文件。
AI推荐理由 面向 Next.js App Router 项目给出 AGENTS.md、CLAUDE.md 与 Cursor 项目规则的最小化配置方案,核心观点是分散的小范围规则比大段指令更易维护、更易被 Agent 遵循。属于可操作的工程实践,但带有免费样例的推广成分,且未提供遵循效果的验证数据。
60
正文
Coding agents do not know the conventions of a Next.js codebase unless the repository tells them. Without that context, a new session can introduce a second router, move data fetching into the browser, expose an environment variable, or ignore the project’s existing naming patterns.
A large instruction dump is not the answer. A small set of scoped rules is easier to review, easier to keep current, and more likely to be followed.
This guide shows a practical baseline for Next.js App Router projects using AGENTS.md, CLAUDE.md, and Cursor project rules. The free Vildanden sample contains the complete files described here.
The four-layer setup
1. AGENTS.md: the tool-neutral baseline
Keep the durable engineering decisions in a root AGENTS.md:
Use the App Router and do not invent a parallel pages/ tree.
Prefer Server Components; use Client Components for hooks, events, and browser APIs.
Keep shared UI in components/ and domain logic in lib/ (or the project’s existing equivalents).
Validate external input at server boundaries.
Keep secrets server-side and document required keys in .env.example.
Run the narrowest useful typecheck, lint, and tests before finishing.
The important part is not the filename alone. The file should describe the repository’s actual architecture, not an idealized rewrite of it.
2. CLAUDE.md: a short Claude Code pointer
A lean CLAUDE.md can point Claude Code to the baseline and add only tool-specific habits:
# CLAUDE.md
Treat `AGENTS.md` as the source of truth for this repository.
- Scan neighboring files before adding a new pattern.
- Prefer Server Components unless hooks or browser APIs require the client.
- Match the package manager and scripts in `package.json`.
- Validate mutations and run focused checks for changed paths.
Enter fullscreen mode
Exit fullscreen mode
Avoid duplicating the entire instruction set in two files. Duplication drifts.
3. Cursor .mdc rules: scope the reminders
Cursor project rules can make the same guidance visible at the right time. A rule for server actions and data access does not need to apply to every Markdown file:
---
description: "Server actions, route handlers, and data fetching"
globs: "**/app/**/*.{ts,tsx},**/lib/**/*.{ts,tsx}"
alwaysApply: false
---
# Data and mutations
- Validate mutation payloads at the server boundary.
- Revalidate the specific path or tag after writes.
- Treat request bodies and search parameters as untrusted.
- Do not leak stack traces to production clients.
Enter fullscreen mode
Exit fullscreen mode
Use alwaysApply: true for genuinely global guidance such as security basics. Use globs for rules that are meaningful only in particular files. If the app uses src/app, update the patterns rather than blindly copying them.
4. Prompts: make the desired finish state explicit
A prompt template is useful when it asks for more than implementation. For a feature, request loading, empty, and error states, tests for risky behavior, and a final summary of files changed and verification steps. For a bug fix, request a root-cause explanation and a regression test when practical.
These prompts are optional. The project rules are the durable layer; prompts are task-level scaffolding.
A 60-second install
Copy AGENTS.md and CLAUDE.md into the project root, or merge them with existing files.
Copy the three .mdc files into .cursor/rules/.
Adjust globs for src/ layouts and local conventions.
Reopen the project and confirm the rules appear in the tool.
Run the project’s normal checks before trusting the result.
The sample has no runtime dependency and does not modify your application. It is a starting point, not a claim that three rules can replace CI, review, or security work.
Download the sample
The free Next.js + React sample is available from Vildanden:
https://vildanden.gumroad.com/l/xphax
For projects that also need Node/TypeScript API, Python FastAPI, and general-fullstack variants, the optional four-stack pack is here:
https://vildanden.gumroad.com/l/daody
Disclosure: This article describes a Vildanden sample and links to its free download and optional paid expansion.