Skip to main content
rule

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.

Install into Cursor · Manually: put the files in place All methods and platforms ↓
.cursor/rules/nextjs-app-router-cursorrules-prompt-file.mdc
Open on GitHub

What 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/ and lib/
  • add loading.js and error.js to 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.js following App Router conventions
  • Split this component: keep the server part separate and mark the client part only where handlers are needed
  • Add loading.js and error.js for the app/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.mdc

Frontmatter: description, globs, alwaysApply

Step 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

Similar IDE rules

All IDE rules for Frontend and UI →

From the same set68

nextjs-vercel-typescript-cursorrules-prompt-file A Cursor rule that sets code style and file structure for Next.js projects with TypeScript, Vercel middleware and a KV database. ★ 41,011repo stars nextjs-typescript-cursorrules-prompt-file A Cursor rule that pins the Next.js and TypeScript stack and the agent's working order: plan first, one file at a time, fixed reply format. ★ 41,011repo stars nextjs-tailwind-typescript-apps-cursorrules-prompt A Cursor rule that points the assistant at Next.js, Tailwind CSS and TypeScript. It sets the working order: plan in pseudocode first, code after. ★ 41,011repo stars nextjs-react-typescript-cursorrules-prompt-file A Cursor rule that tells the agent how to write code in Next.js 14 App Router, React and TypeScript projects. ★ 41,011repo stars netlify-official-cursorrules-prompt-file A Cursor rule that hands the agent Netlify's official conventions: function types, environment access, and no stray CORS headers. ★ 41,011repo stars nativescript-cursorrules-prompt-file A Cursor rule that tells the agent how to structure a NativeScript project and which libraries to reach for. ★ 41,011repo stars manifest-yaml-cursorrules-prompt-file A Cursor rule that tells the agent how to scaffold a small Manifest backend: project setup, the manifest/backend.yml file and limits on entities. ★ 41,011repo stars laravel-php-83-cursorrules-prompt-file A Cursor rule that walks the agent through building Laravel packages: plan, directory layout, naming standards, tests and docs. ★ 41,011repo stars

Project sponsors

Companies that keep this analytics open
Gold sponsor

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor