# Cursor Rules: Next.js — Best Practices for AI Coding

> Cursor rules file for Next.js projects. Configures AI to follow App Router patterns, server components, TypeScript conventions, and Tailwind CSS best practices.

## Install

Save in your project root:

## Quick Use

Create `.cursor/rules/nextjs.mdc` in your project root:
```
---
description: Next.js App Router best practices
globs: ["**/*.tsx", "**/*.ts", "app/**/*"]
---
```

---

## Intro

A comprehensive Cursor rules file that teaches the AI assistant Next.js 14+ best practices. Covers App Router patterns, Server vs Client Components, data fetching, TypeScript conventions, and Tailwind CSS integration.

**Best for**: Next.js developers using Cursor IDE
**Works with**: Cursor

---

## 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.

## Source & Thanks

> Curated from the [cursor.directory](https://cursor.directory) community.
> Based on [Next.js documentation](https://nextjs.org/docs) best practices.

---
Source: https://tokrepo.com/en/workflows/f1f269b1-41e3-4586-8bb0-a671b38fa248
Author: AI Open Source