Next.js + Tailwind Development 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