nextjs-app-router-cursorrules-prompt-file — Cursor rule for Next.js
A Cursor rule that hands the agent a set of Next.js App Router habits: server components by default, file-based routing, separate files for loading and errors.
.cursor/rules/nextjs-app-router-cursorrules-prompt-file.mdcWhat nextjs-app-router-cursorrules-prompt-file does
The file collects App Router practices and feeds them to the agent as context. Seven points sit at the top: server components by default, client components only when needed, the file-based routing system, layout.js for shared layouts, loading.js for loading states, error.js for error handling, route handlers for API routes.
Then comes the folder layout: app/ with layout.js and page.js, plus components/, lib/, styles/, and public/ alongside. Extra instructions push TypeScript, metadata for SEO, the Image component, CSS Modules or Tailwind, error boundaries, Next.js naming conventions for special files, and environment variables for configuration.
The frontmatter sets alwaysApply: false with globs as **/*. So the rule does not switch itself on — you have to attach it to the project or invoke it, otherwise Cursor never reads it. On a Pages Router codebase the advice about loading.js and route handlers has nothing to attach to.
What it helps with
- make the agent default to server components
- lay out files across
app/,components/andlib/ - add
loading.jsanderror.jsto routes - move API routes onto route handlers
- settle on Next.js naming for special files
Example prompts for the agent
- Create a page at
app/dashboard/page.jsfollowing App Router conventions - Split this component: keep the server part separate and mark the client part only where handlers are needed
- Add
loading.jsanderror.jsfor theapp/blog/[slug]route
How to install nextjs-app-router-cursorrules-prompt-file
Manually: put the files in place
.cursor/rules/nextjs-app-router-cursorrules-prompt-file.mdcFrontmatter: description, globs, alwaysApply
Manually: put the files in place
.claude/rules/nextjs-app-router-cursorrules-prompt-file.mdThe paths frontmatter field limits the files: move globs from the source into paths
AGENTS.md
Codex reads AGENTS.md: paste the rule text there
Manually: put the files in place
.github/instructions/nextjs-app-router-cursorrules-prompt-file.instructions.mdThe applyTo field sets which files it applies to: move globs from the source into applyTo
Manually: put the files in place
.devin/rules/nextjs-app-router-cursorrules-prompt-file.mdManually: put the files in place
.clinerules/nextjs-app-router-cursorrules-prompt-file.mdStep by step, with commands for each platform: Cursor rules: .mdc files, four modes and what replaced .cursorrules
Questions about nextjs-app-router-cursorrules-prompt-file
How do I install nextjs-app-router-cursorrules-prompt-file in Cursor?
Create .cursor/rules/nextjs-app-router-cursorrules-prompt-file.mdc in your project root and paste the rule contents into it.
What does nextjs-app-router-cursorrules-prompt-file do?
It gives the Cursor agent Next.js App Router practices: server components by default, file-based routing, layout.js, loading.js, error.js and route handlers for API routes.
Does the rule apply to every file automatically?
No. The frontmatter sets alwaysApply: false, so you attach the rule to the project or invoke it yourself.
Source text
nextjs-app-router-cursorrules-prompt-file.mdc · CC0-1.0
--- description: "Cursor rules for Next.js development with App Router integration." globs: **/* alwaysApply: false --- // Next.js App Router .cursorrules // Next.js App Router best practices const nextjsAppRouterBestPractices = [ "Use server components by default", "Implement client components only when necessary", "Utilize the new file-based routing system", "Use layout.js for shared layouts", "Implement loading.js for loading states", "Use error.js for error handling", "Utilize route handlers for API routes", ]; // Folder structure const folderStructure = ` app/ layout.js page.js components/ lib/ styles/ public/ `; // Additional instructions const additionalInstructions = ` 1. Use TypeScript for type safety 2. Implement proper metadata for SEO 3. Utilize Next.js Image component for optimized images 4. Use CSS Modules or Tailwind CSS for styling 5. Implement proper error boundaries 6. Follow Next.js naming conventions for special files 7. Use environment variables for configuration `;
© PatrickJS · CC0-1.0 · PatrickJS/awesome-cursorrules