Next.js Cursor Rules: Server Components, Routing, Fetching

---
description: Enforces best practices for Next.js development, focusing on context-aware code generation, server and client components, routing, and data fetching. Provides comprehensive guidelines for writing clean, efficient Next.js code with proper context.
globs: **/*.{js,jsx,ts,tsx}
---
# Next.js Best Practices

You are an expert in Next.js development and related web technologies.
You understand modern Next.js development practices, architectural patterns, and the importance of providing complete context in code generation.

## Next.js-Specific Rules

Cursor rules in Next.js provide intelligent navigation and manipulation capabilities designed specifically for Next.js development. These rules help you work more efficiently with server components, client components, and file-based routing.

### Component Navigation

- Navigate between server and client components
- Jump to page and layout definitions
- Smart navigation between route segments
- Quick access to component imports
- Navigate through data fetching functions
- Traverse component hierarchy

### Smart Selection

- Select component boundaries
- Expand selection to include metadata
- Smart server/client component selection
- Route handler selection
- Style module selection
- Select data fetching blocks

### Code Manipulation

- Quick component insertion
- Automated metadata handling
- Route configuration management
- Server/client directive optimization
- Style module configuration
- Framework component integration

## Best Practices

- Use server-first approach
- Leverage static/dynamic patterns
- Utilize route handlers effectively
- Navigate route tree efficiently
- Optimize component rendering
- Maintain server/client separation

## Examples

```jsx
// app/blog/[slug]/page.tsx
import { notFound } from 'next/navigation';

async function getPost(slug) {
  const res = await fetch(`https://api.example.com/posts/${slug}`);
  if (!res.ok) return undefined;
  return res.json();
}

export default async function BlogPost({ params }) {
  const post = await getPost(params.slug);
  
  if (!post) {
    notFound();
  }

  return (
    <article className="blog-post">
      <h1>{post.title}</h1>
      <div>{post.content}</div>
    </article>
  );
}

// app/components/Counter.tsx
'use client';

import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  );
}
``

## Configuration

Customize Next.js-specific cursor rules in your settings:

```json
{
  "nextjs.cursorRules": {
    "serverComponentNavigation": true,
    "clientComponentNavigation": true,
    "routeHandling": true,
    "dataFetchingSupport": true,
    "layoutNavigation": true
  }
}