5 .cursorrules Snippets Every Next.js Developer Needs

Why Your AI is Confused

You ask for a Next.js component. The AI gives you one using useEffect and useState. You sigh. "No, this is a Server Component," you type.

This dance is avoidable. The problem is that the generic model (Claude 3.5 or GPT-4o) knows *everything* about React, including the old stuff. It doesn't know *your* specific constraints.

The solution is a .cursorrules file in your root directory. Here are the 5 essential snippets every Next.js developer needs.

1. The "Server Component First" Rule

Force the AI to treat everything as a Server Component unless interaction is explicitly requested.

# NEXT.JS ARCHITECTURE
- All components are Server Components by default.
- strict preference: DO NOT use 'use client' unless the component uses hooks (useState, useEffect) or event listeners.
- If state is needed, extract the interactive part into a smaller sub-component.

2. The "App Router" Enforcer

Prevent the AI from giving you pages/ directory advice or deprecated data fetching methods.

# ROUTING & DATA FETCHING
- Use Next.js 15 App Router conventions.
- DO NOT use getStaticProps or getServerSideProps. Use async/await in Server Components instead.
- Use 'next/navigation' for routing (useRouter, usePathname), NOT 'next/router'.

3. The Tech Stack Lock-In

Stop the AI from guessing which library you use for styling or validation.

# TECH STACK
- Styling: Tailwind CSS (utility-first). Do not use CSS modules.
- Icons: lucide-react. Do not use FontAwesome or Heroicons.
- Forms: react-hook-form + zod.
- State: Nuqs (URL state) or Zustand. No Redux.

4. The "Folder Structure" Map

Help the AI place files in the Right Place™.

# FILE STRUCTURE
- @/components/ui/ -> Shadcn UI primitives (Button, Card, etc).
- @/features/[feature-name]/ -> Domain specific components.
- @/app/api/ -> Route handlers.
- @/lib/ -> Utility functions (no JSX).

5. The "Code Quality" Gatekeeper

Enforce your preferences on syntax.

# CODE QUALITY
- Use TypeScript interfaces (not types) for component props.
- Use named exports: 'export function Component() {}', NOT 'const Component = () => {}'.
- Avoid default exports.
- Use 'clsx' and 'tailwind-merge' for class conditionals.

How to Use These

Create a file named .cursorrules in the root of your project. Copy and paste these snippets into it. Save.

That's it. Now, every chat, every prompt, and every Composer generation will obey these laws.