Full-Stack Next.js

Next.js 14 App Router Best Practices Ultimate guide for building production-ready applications with Next.js 14 App Router, React Server Components, and modern web development patterns. Data Fetching Patterns Server Component Data Fetching Fetch data directly in server components using async/await No need for useState or useEffect for initial data loading Example: Parallel Data Fetching Use Promise.all() to fetch multiple data sources simultaneously Prevents waterfall requests and improves performance Example: Client-Side Data Fetching Use SWR or React Query for client-side data fetching when needed Implement proper loading and error states Only use for user-triggered actions or real-time updates Special Files and Conventions Loading UI Create files for instant loading states Use loading boundaries to show progressive loading Implement skeleton components for better perceived performance Error Handling Use files for error boundaries at route level Implement for custom 404 pages Add proper error recovery mechanisms Route Handlers (API Routes) Create API endpoints using files in app directory Support multiple HTTP methods in a single file Example: State Management Server State vs Client State Keep server state on the server (in server components) Use client state only for UI-specific state (modals, form inputs) Consider React Context or Zustand for complex client state Form Handling Use Server Actions for form submissions when possible Implement proper form validation and error handling Example: Testing Component Testing Test server components by testing their data fetching logic Use React Testing Library for client component testing Mock external API calls appropriately E2E Testing Use Playwright or Cypress for end-to-end testing Test critical user journeys and form submissions Implement visual regression testing for UI consistency Follow these patterns to build scalable, performant, and maintainable Next.js 14 applications.

Tailwind CSS Best Practices Complete guide for building responsive, accessible, and maintainable user interfaces with Tailwind CSS utility-first framework. Spacing and Layout Spacing Scale Mastery Use consistent spacing units: , , , Understand the scale: , , Use logical properties: (padding-inline-start), (margin-inline-start) Example spacing patterns: Layout Patterns Use Flexbox utilities for one-dimensional layouts Use Grid utilities for two-dimensional layouts Implement common patterns: navbar, sidebar, card grids Example layout structures: Container and Breakpoint Strategy Use class for responsive max-widths Implement proper padding: Understand breakpoint values: sm (640px), md (768px), lg (1024px), xl (1280px) Component Patterns Button Components Create consistent button styles with variants Include hover, focus, and disabled states Implement proper accessibility attributes Example button patterns: Form Elements Style inputs, selects, and textareas consistently Include focus states and validation styling Implement proper spacing and alignment Example form patterns: Card Components Design flexible card layouts for different content types Include proper shadows, borders, and spacing Make cards responsive and accessible Example card patterns: Performance Optimization Production Build Optimization Configure PurgeCSS to remove unused styles Use JIT mode for optimal bundle size Monitor CSS bundle size in production Example Tailwind config: Component Extraction Strategy Extract repeating patterns into components (React, Vue, etc.) Use sparingly for truly reusable component classes Keep utility-first approach even within components Example component extraction: Advanced Patterns Grid and Layout Systems Master CSS Grid utilities for complex layouts Implement responsive grid patterns Use subgrid when browser support allows Example advanced grid: Custom Plugin Development Create custom plugins for project-specific utilities Extend Tailwind's functionality when needed Maintain consistency with Tailwind's naming conventions Example custom plugin: Follow these practices to build beautiful, responsive, and maintainable user interfaces with Tailwind CSS.

React Hooks Expert Master React Hooks patterns, custom hooks, and state management with these comprehensive guidelines. Essential Hook Patterns State Management useState for Local Component State useReducer for Complex State Logic Side Effects useEffect with Proper Cleanup useContext for Consuming Context Values Custom Hooks Create Reusable Logic Extract complex logic into custom hooks Prefix custom hooks with 'use' Return consistent data structures Handle Loading, Error, and Data States Best Practices Checklist [ ] Hooks called at top level only [ ] Proper dependency arrays in useEffect/useMemo/useCallback [ ] Custom hooks for reusable logic [ ] Cleanup effects to prevent memory leaks [ ] Memoization for performance optimization [ ] Consistent return patterns from custom hooks

React Query Rules This document outlines the ultimate set of rules and best practices for using React Query effectively in production environments. Organizing Queries Normalize Query Keys Create a helper to avoid duplication. Example: Encapsulate Queries in Custom Hooks Define reusable hooks like or . Keeps components clean and ensures consistent query usage across the app. Set and Wisely : How long data is considered "fresh". Set based on data volatility. : How long unused data stays cached before garbage collection. Avoid Over-Fetching Use for conditional queries. Example: wait until is available. Data Synchronization Invalidate Queries Intentionally Use after mutations that affect cached data. Narrow scope: invalidate only related queries instead of all queries. Background Refetching Use and sparingly. Enable only when data must stay real-time fresh. Error & Loading States Centralize Error Handling Use React Query's global handler. Provide user-friendly error boundaries in the UI. Never Block UI Avoid full-page global spinners. Use skeletons, placeholders, or incremental loading instead. Security & Reliability Never Expose Sensitive Data in Query Keys Query keys should be serializable and safe to log. Use Retry Strategically Default retries may harm UX on destructive operations. Configure retries per-query to fit the use case. Follow these rules to keep your React Query setup clean, scalable, and production-ready.

TypeScript Expert Best Practices Comprehensive guide for mastering TypeScript's advanced type system, generics, and building type-safe applications at scale. Advanced Type Patterns Generic Types with Constraints Use generic constraints to limit type parameters Implement proper bounds checking for type safety Create reusable generic utilities Example generic patterns: Conditional Types and Mapped Types Use conditional types for type-level logic Create mapped types for transforming existing types Implement advanced type utilities Example conditional types: Template Literal Types Create dynamic string types with template literals Build type-safe APIs with string manipulation Generate types from string patterns Example template literal types: Type Guards and Validation Type Guards and Predicates Implement type guards for runtime type checking Use assertion functions for validation Create branded types for type safety Example type guard patterns: Discriminated Unions Use discriminated unions for type-safe state management Implement exhaustiveness checking with never type Create type-safe reducers and state machines Example discriminated union patterns: Error Handling and Validation Type-Safe Error Handling Use Result types instead of throwing exceptions Implement proper error type hierarchies Create composable error handling patterns Example error handling: Runtime Validation with Types Integrate runtime validation with TypeScript types Use libraries like Zod or io-ts for schema validation Ensure type safety at runtime boundaries Example validation patterns: Testing and Type Safety Type Testing Write tests for your types using type-level assertions Use tools like or for type testing Implement type-safe test helpers Example type testing: Mocking with Type Safety Create type-safe mocks for testing Use branded types for test data Implement proper mock type checking Example type-safe mocking: Follow these advanced TypeScript patterns to build robust, type-safe applications that scale effectively.