Next.js Project Rules

Name: Next.js Project Rules
Rating: 4.7 (24300 reviews)
Author: cursor-community

Guide Cursor to use App Router patterns correctly every time

Beginner5 min

engineering/Next.jsUpdated Mar 14, 2026

Software Engineer

terminal

curl -o .cursorrules https://skills.dev/rules/nextjs

This install command is a placeholder. The real source repo for this skill is still being verified.

by cursor-community

About this skill

Opinionated Next.js rules covering App Router patterns, server/client component boundaries, route handlers, and optimal data fetching.

Capabilities

file editing

Use cases

Next.js development
App Router patterns
Server components

Skill Definition

This is the actual SKILL.md file that powers this skill. Copy it to install.

SKILL.md

---
name: cursor-nextjs-rules
description: |
  Cursor rules for Next.js App Router projects. Always active when working in a
  Next.js project with Cursor. Enforces server component defaults, proper data
  fetching, and App Router patterns.
---

# Next.js App Router Rules for Cursor

## Core rules

1. **Server components by default.** Never add "use client" unless the component
   uses hooks, event handlers, or browser APIs. When you must use client code,
   extract it into the smallest possible client component.

2. **Data fetching in server components.** Use `async` server components with
   direct database/API calls. Never use `useEffect` for data fetching.

3. **Route handlers over API routes.** Use `app/api/*/route.ts` with named
   exports (GET, POST, PUT, DELETE). Never use `pages/api`.

4. **Metadata API for SEO.** Export `metadata` or `generateMetadata` from
   layouts and pages. Never use `<Head>` from next/head.

5. **Server Actions for mutations.** Use `"use server"` functions for form
   submissions and data mutations. Revalidate with `revalidatePath` or
   `revalidateTag`.

## File conventions

- `layout.tsx` - Shared UI that wraps child routes
- `page.tsx` - Unique route UI
- `loading.tsx` - Loading UI (Suspense boundary)
- `error.tsx` - Error boundary (must be client component)
- `not-found.tsx` - 404 UI

## Example: server component with data fetching

```tsx
// app/posts/page.tsx - NO "use client"
import { db } from "@/lib/db";

export default async function PostsPage() {
  const posts = await db.query.posts.findMany();
  return (
    <ul>
      {posts.map(p => <li key={p.id}>{p.title}</li>)}
    </ul>
  );
}
```

## Requirements

- Next.js 14+ with App Router
- TypeScript recommended

How to install

Create the skill directory and file

terminal

mkdir -p ~/.claude/skills/cursor-nextjs-rules

Copy the SKILL.md content above

file path

~/.claude/skills/cursor-nextjs-rules/SKILL.md

Resulting file structure:

~/.claude/
  skills/
    cursor-nextjs-rules/
      SKILL.md    <-- skill definition

Skills are loaded automatically by Claude Code when you start a new session. The skill name and description in the frontmatter determine when Claude triggers it.

Learn this in depth

Free courses on AI-assisted development and building agents

Trace your skill's performance

Local observability dashboard for AI tool usage