{"filename":"nextjs.mdc","content":"---\ndescription: \"Next.js with TypeScript and Tailwind UI best practices\"\nglobs: **/*.tsx, **/*.ts, src/**/*.ts, src/**/*.tsx\nalwaysApply: false\n---\n# Next.js Best Practices\n\n## Project Structure\n- Use the App Router directory structure\n- Place components in `app` directory for route-specific components\n- Place shared components in `components` directory\n- Place utilities and helpers in `lib` directory\n- Use lowercase with dashes for directories (e.g., `components/auth-wizard`)\n\n## Components\n- Use Server Components by default\n- Mark client components explicitly with 'use client'\n- Wrap client components in Suspense with fallback\n- Use dynamic loading for non-critical components\n- Implement proper error boundaries\n- Place static content and interfaces at file end\n\n## Performance\n- Optimize images: Use WebP format, size data, lazy loading\n- Minimize use of 'useEffect' and 'setState'\n- Favor Server Components (RSC) where possible\n- Use dynamic loading for non-critical components\n- Implement proper caching strategies\n\n## Data Fetching\n- Use Server Components for data fetching when possible\n- Implement proper error handling for data fetching\n- Use appropriate caching strategies\n- Handle loading and error states appropriately\n\n## Routing\n- Use the App Router conventions\n- Implement proper loading and error states for routes\n- Use dynamic routes appropriately\n- Handle parallel routes when needed\n\n## Forms and Validation\n- Use Zod for form validation\n- Implement proper server-side validation\n- Handle form errors appropriately\n- Show loading states during form submission\n\n## State Management\n- Minimize client-side state\n- Use React Context sparingly\n- Prefer server state when possible\n- Implement proper loading states\n"}