.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