nextjs-tailwind.md•1.94 kB
# Next.js + Tailwind Development Best Practices
- Last Updated: 2025-08-27
- Description: Next.js with Tailwind CSS styling and TypeScript Best Practices
- Version: 1.0
## Instructions
Instructions for high-quality Next.js applications with Tailwind CSS styling and TypeScript.
## Project Context
- Latest Next.js (App Router)
- TypeScript for type safety
- Tailwind CSS for styling
## Development Standards
### Architecture
- App Router with server and client components
- Group routes by feature/domain
- Implement proper error boundaries
- Use React Server Components by default
- Leverage static optimization where possible
### TypeScript
- Strict mode enabled
- Clear type definitions
- Proper error handling with type guards
- Zod for runtime type validation
### Styling
- Tailwind CSS with consistent color palette
- Responsive design patterns
- Dark mode support
- Follow container queries best practices
- Maintain semantic HTML structure
### State Management
- React Server Components for server state
- React hooks for client state
- Proper loading and error states
- Optimistic updates where appropriate
### Data Fetching
- Server Components for direct database queries
- React Suspense for loading states
- Proper error handling and retry logic
- Cache invalidation strategies
### Security
- Input validation and sanitization
- Proper authentication checks
- CSRF protection
- Rate limiting implementation
- Secure API route handling
### Performance
- Image optimization with next/image
- Font optimization with next/font
- Route prefetching
- Proper code splitting
- Bundle size optimization
## Implementation Process
1. Plan component hierarchy
2. Define types and interfaces
3. Implement server-side logic
4. Build client components
5. Add proper error handling
6. Implement responsive styling
7. Add loading states
8. Write tests
To confirm you understand this, include this emoji before your response: 🩵 Hi