Generate production-ready Next.js Cursor rules for Project Rules (.mdc), AGENTS.md, or legacy .cursorrules. This template encodes stack-specific conventions for projects using Next.js. React framework with SSR, SSG, API routes, App Router, and file-based routing.
The template focuses Cursor AI on concrete Next.js practices instead of generic coding advice. Required sections are always included; optional sections can be enabled when they match your project.
Optional sections: TypeScript in Next.js.
The generator turns these sections into Project Rules with frontmatter, AGENTS.md, or a single .cursorrules file depending on the output format you choose.
- Use the App Router for all new pages.
- Place page components in app/ directory with page.camelCase naming.
- Use layout.tsx for shared layouts.
- Use loading.tsx for loading states (Suspense boundaries).
- Use error.tsx for error boundaries per route segment.
- Prefer server components by default; add 'use client' only when needed.- Fetch data in server components when possible.
- Use async/await in server components directly.
- Use route handlers (route.ts) for API endpoints.
- Use revalidate or generateStaticParams for static generation.
- Prefer fetch with next: { revalidate } for incremental static regeneration.
- Handle loading and error states in client components.- Use next/image for all images with explicit width/height.
- Use next/link for client-side navigation.
- Use next/font for font optimization.
- Implement dynamic imports with next/dynamic for heavy components.
- Use server actions for form mutations.
- Keep bundle size in check: analyze with @next/bundle-analyzer.