nextjs

Next.js Best Practices

Project Structure

• Use the App Router directory structure
• Place components in app directory for route-specific components
• Place shared components in components directory
• Place utilities and helpers in lib directory
• Use lowercase with dashes for directories (e.g., components/auth-wizard)

Components

• Use Server Components by default
• Mark client components explicitly with 'use client'
• Wrap client components in Suspense with fallback
• Use dynamic loading for non-critical components
• Implement proper error boundaries
• Place static content and interfaces at file end

Performance

• Optimize images: Use WebP format, size data, lazy loading
• Minimize use of 'useEffect' and 'setState'
• Favor Server Components (RSC) where possible
• Use dynamic loading for non-critical components
• Implement proper caching strategies

Data Fetching

• Use Server Components for data fetching when possible
• Implement proper error handling for data fetching
• Use appropriate caching strategies
• Handle loading and error states appropriately

Routing

• Use the App Router conventions
• Implement proper loading and error states for routes
• Use dynamic routes appropriately
• Handle parallel routes when needed
• Whenever you need to use useRouter, import it like this import { useRouter } from "@bprogress/next/app"; to show global proggress bar

Forms and Validation

• Use Zod for form validation
• Use react-hook-form for form handling defined in form.tsx
• Implement proper server-side validation
• Handle form errors appropriately
• Show loading states during form submission

State Management

• Minimize client-side state
• Use React Context sparingly
• Prefer server state when possible
• Implement proper loading states