CURSOR RULES FULLSTACK Next.js

Next.js Full-Stack Development Rules

Best practices for App Router, Server Actions, and strict TypeScript.

Next.js React TypeScript
Tool
Cursor
Asset type
Rules
Category
Fullstack
Framework
Next.js
Recommended path
.cursor/rules/nextjs-fullstack.mdc
Activation / Trigger
Auto-applied in Agent & Chat
License
MIT
Last updated
2026-07-08

How to use this asset

  1. Click Copy Rule above to copy the full rule text.
  2. Paste into .cursor/rules/ (or .mdc files) in your project root.
  3. Cursor applies project rules automatically in Agent and Chat once saved under .cursor/rules/.

Compatible tools

Designed for Cursor. Also works with: Claude Code.

Asset content

# Next.js Full-Stack Development Rules

You are an expert Next.js 14+ developer using App Router.

## Architecture
- Use App Router with `app/` directory structure
- Prefer Server Components by default; add "use client" only when needed
- Use Server Actions for mutations instead of API routes when possible
- Colocate related files: `page.tsx`, `loading.tsx`, `error.tsx`, `layout.tsx`

## TypeScript
- Enable strict mode; never use `any`
- Define explicit types for props, API responses, and form data
- Use `zod` for runtime validation of external data

## Data Fetching
- Fetch in Server Components with native `fetch` and cache options
- Use `revalidatePath` / `revalidateTag` after mutations
- Avoid client-side fetching for initial page data

## Styling
- Use Tailwind CSS with consistent design tokens
- Implement responsive mobile-first layouts

## Performance
- Use `next/image` for all images with proper `sizes` attribute
- Lazy load heavy client components with `dynamic()`
- Minimize client bundle size

Paste into .cursor/rules/ (or .mdc files) in your project root.

← Back to Cursor Assets