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

FAQ

Q: What is Cursor Rules: Next.js? A: Cursor rules file for Next.js projects. Configures AI to follow App Router patterns, server components, TypeScript conventions, and Tailwind CSS best practices.

Q: How do I install Cursor Rules: Next.js? A: Check the Quick Use section above for step-by-step installation instructions. Most assets can be set up in under 2 minutes.