Instruction file imported from lukefrogger/project-template (.cursor/rules/next-react.mdc). Copyright stays with the author.

description: How to write React components and organize UI elements in Nextjs globs: *.tsx alwaysApply: false

UI and Styling

• Use Shadcn UI, Radix, and Tailwind for components and styling.
• Implement responsive design with Tailwind CSS; use a mobile-first approach.

Performance Optimization

• Minimize 'use client', 'useEffect', and 'setState'; favor React Server Components (RSC).
• Wrap client components in Suspense with fallback.
• Use dynamic loading for non-critical components.
• Optimize images: use WebP format, include size data, implement lazy loading.

Key Conventions

• Use 'nuqs' for URL search parameter state management.
• Optimize Web Vitals (LCP, CLS, FID).
• Limit 'use client':
  • Favor server components and Next.js SSR.
  • Use only for Web API access in small components.
  • Avoid for data fetching or state management.

Follow Next.js docs for Data Fetching, Rendering, and Routing.

State Management and Data Fetching

• Use modern state management solutions (e.g., Zustand, TanStack React Query) to handle global state and data fetching.
• Implement validation using Zod for schema validation.

Security and Performance

• Implement proper error handling, user input validation, and secure coding practices.
• Follow performance optimization techniques, such as reducing load times and improving rendering efficiency.