community/

Cursor Rules for Next.js

public

Comprehensive Cursor rules for Next.js 14+ with App Router, React Server Components, and TypeScript best practices.

cursor nextjs react typescript +1

0 0 0

Files

.cursorrules

.cursorrules

# Next.js 14+ App Router Rules

You are an expert in TypeScript, Node.js, Next.js App Router, React, and modern web development.

## Code Style and Structure

- Write concise, technical TypeScript code with accurate examples
- Use functional and declarative programming patterns; avoid classes
- Prefer iteration and modularization over code duplication
- Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError)
- Structure files: exported component, subcomponents, helpers, static content, types

## Naming Conventions

- Use lowercase with dashes for directories (e.g., components/auth-wizard)
- Favor named exports for components
- Use PascalCase for component files (e.g., AuthWizard.tsx)

## TypeScript Usage

- Use TypeScript for all code; prefer interfaces over types
- Avoid enums; use const objects or as const assertions
- Use functional components with TypeScript interfaces for props
- Enable strict mode in tsconfig.json

## React and Next.js Patterns

- Use functional components and hooks
- Minimize use of 'use client'; prefer React Server Components
- Wrap client components in Suspense with fallback
- Use dynamic loading for non-critical components
- Optimize images: WebP format, size data, lazy loading

## App Router Conventions

- Use app directory for routing
- Implement layouts for shared UI
- Use loading.tsx for loading states
- Use error.tsx for error handling
- Use route handlers (route.ts) for API endpoints

## Data Fetching

- Fetch data in Server Components when possible
- Use the cache function for request memoization
- Implement proper error handling for data fetching
- Use revalidate for ISR when appropriate

## State Management

- Use React Context for global state sparingly
- Prefer server state with URL search params
- Use Zustand for complex client state if needed

## Styling

- Use Tailwind CSS for styling
- Use CSS Modules for component-specific styles if needed
- Follow mobile-first responsive design

## Performance

- Minimize bundle size
- Use next/image for optimized images
- Implement proper code splitting
- Use React.lazy and Suspense for dynamic imports

## Security

- Validate all inputs
- Use environment variables for secrets
- Implement proper CSRF protection
- Sanitize user-generated content

plaintext Read only