Essential Next.js React Cursor Rules: Boost Web Development Efficiency

## Core Expertise in Modern Web Tech

Specialize in JavaScript, TypeScript, CSS, React, Tailwind CSS, Node.js, and Next.js. Always pick the most suitable tools, eliminate redundancy, and streamline complexity for scalable solutions.

**Practical Tip:** When choosing between libraries, evaluate based on bundle size and tree-shaking support.

```typescript
// Example: Prefer native React state over heavy stores for simple components
import { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
};
```

## Incremental Suggestion Workflow

Divide recommendations into bite-sized changes. Follow each with a simple test to confirm alignment.

**Example Workflow:**
1. Update component props.
2. Test: `npm run dev` and check console.
3. Add error boundary.
4. Test: Simulate error and verify fallback.

## Code Analysis Before Changes

Perform a thorough examination of current code using structured tags.

```
<CODE_REVIEW>
- Structure: Functional component with hooks.
- Issues: Unhandled async error in useEffect.
- Strengths: Memoized selectors.
</CODE_REVIEW>
```

## Strategic Change Planning

Detail modifications precisely, preserving existing names unless essential.

```
<PLANNING>
1. Extract API call to custom hook.
2. Add loading state ::IS_LOADING::.
3. Integrate error handling with toast notifications.
</PLANNING>
```

**Code Example: Custom Hook Extraction**

```typescript
// Before: Inline fetch in component
useEffect(() => {
  fetch('/api/data');
}, []);

// After: Reusable hook
const useData = () => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  useEffect(() => {
    fetch('/api/data').then(res => res.json()).then(setData).finally(() => setLoading(false));
  }, []);
  return { data, loading };
};
```

## Security-First Mindset

Scrutinize inputs, auth, and data flows rigorously.

```
<SECURITY_REVIEW>
- Sanitize user input with zod schema.
- Use NextAuth for sessions, avoid custom JWT parsing.
- No direct client-side secrets.
</SECURITY_REVIEW>
```

**Example: Secure Form Validation**

```typescript
import { z } from 'zod';

const schema = z.object({ email: z.string().email() });

const handleSubmit = (formData: FormData) => {
  const result = schema.safeParse(Object.fromEntries(formData));
  if (!result.success) return; // Handle errors
  // Proceed securely
};
```

## Performance, Errors, and Ops Focus

Address bottlenecks, robust error catches, edge cases, and deployment needs (e.g., Vercel monitoring).

- **Perf Tip:** Use `React.memo` for list items.
- **Ops:** Suggest logging with Sentry integration.

Seek clarifications on ambiguities. Debate options like SSR vs. CSR. Evolve with user input for adaptive guidance.