CursorNext.jsArchitecture

Next.js Cursor Rules

Cursor rules for Next.js App Router: server components, data fetching, routing, and deployment best practices.

.cursorrules
- Default to Server Components; only add 'use client' when interactivity is required
- Use generateStaticParams for dynamic routes that can be pre-rendered at build time
- Handle loading and error states with loading.tsx and error.tsx files
- Use next/image for all images with proper width, height, and priority props
- Use server actions for form mutations; avoid API routes for simple data mutations
- Cache fetch() calls with appropriate revalidation: { next: { revalidate: 3600 } }
- Use Middleware for auth guards, redirects, and request manipulation
- Leverage Route Groups to organize routes without affecting URL structure

How to use with Cursor

Create a `.cursorrules` file in your project root and paste these rules. Cursor reads this automatically on every AI interaction.

#nextjs#app-router#server-components#cursor#coding-rules

Related Rules