Next.js

1---
2description: Next.js with TypeScript and Tailwind UI best practices
3globs: **/*.tsx, **/*.ts, src/**/*.ts, src/**/*.tsx
4---
5 
6# Next.js Best Practices
7 
8## Project Structure
9- Use the App Router directory structure
10- Place components in `app` directory for route-specific components
11- Place shared components in `components` directory
12- Place utilities and helpers in `lib` directory
13- Use lowercase with dashes for directories (e.g., `components/auth-wizard`)
14 
15## Components
16- Use Server Components by default
17- Mark client components explicitly with 'use client'
18- Wrap client components in Suspense with fallback
19- Use dynamic loading for non-critical components
20- Implement proper error boundaries
21- Place static content and interfaces at file end
22 
23## Performance
24- Optimize images: Use WebP format, size data, lazy loading
25- Minimize use of 'useEffect' and 'setState'
26- Favor Server Components (RSC) where possible
27- Use dynamic loading for non-critical components
28- Implement proper caching strategies
29 
30## Data Fetching
31- Use Server Components for data fetching when possible
32- Implement proper error handling for data fetching
33- Use appropriate caching strategies
34- Handle loading and error states appropriately
35 
36## Routing
37- Use the App Router conventions
38- Implement proper loading and error states for routes
39- Use dynamic routes appropriately
40- Handle parallel routes when needed
41 
42## Forms and Validation
43- Use Zod for form validation
44- Implement proper server-side validation
45- Handle form errors appropriately
46- Show loading states during form submission
47 
48## State Management
49- Minimize client-side state
50- Use React Context sparingly
51- Prefer server state when possible
52- Implement proper loading states