Cursor Rules: Next.js — Best Practices for AI Coding

What It Covers

Architecture

• App Router directory structure (app/, components/, lib/)
• Server Components by default, Client Components only when needed
• Route groups, layouts, loading/error boundaries

Code Patterns

• use server and use client directives
• Server Actions for mutations
• generateMetadata for SEO
• ISR and dynamic rendering strategies

Conventions

• TypeScript strict mode
• Tailwind CSS for styling (no CSS modules)
• cn() utility for conditional classes
• Named exports for components

Example Rule

You are an expert Next.js developer.

Key principles:
- Use Server Components by default
- Only add "use client" when you need interactivity
- Use Server Actions for form mutations
- Prefer fetch() with Next.js caching over client-side data fetching
- Use TypeScript strict mode
- Style with Tailwind CSS utility classes