React & Next.js Best Practices

Goal: Build high-performance, maintainable, and accessible React applications using modern patterns (React 19+, Next.js App Router).

1. Architecture & Rendering

• •App Router First: Use Next.js App Router (app/) for all new projects.
• •Server Components (RSC): Default to Server Components. Only add 'use client' when interactivity (state, hooks, event listeners) is strictly needed.
• •Suspense & Streaming: Use <Suspense> boundaries to stream UI parts that depend on slow data.
• •Data Fetching: Fetch data in Server Components directly (async/await components). Avoid useEffect for data fetching.

2. Component Patterns

• •Composition: Use children prop to tackle prop drilling.
• •Atomic Design: Organize components by atomicity (though feature-based folder structure is preferred for scale).
• •Custom Hooks: Extract complex logic into useHookName.
• •Props: Use strict TypeScript interfaces for props. Avoid any.

3. State Management

• •URL as State: Store shareable state (filters, pagination) in URL Search Params.
• •Server State: Use React Query (TanStack Query) or SWR for client-side data fetching/caching if RSC is not applicable.
• •Global State: Minimal use of Zustand/Context. Prefer local state + composition.

4. Performance Optimization

• •Images: Always use next/image with proper width, height, and sizes.
• •Fonts: Use next/font to eliminate layout shift (CLS).
• •Lazy Loading: Use next/dynamic or React.lazy for heavy client components below the fold.
• •Bundle Analysis: Regularly check bundle size with @next/bundle-analyzer.

5. Styling

• •Tailwind CSS: Use utility-first styling.
• •CN Utility: Use clsx + tailwind-merge (typically cn() helper) for conditional class merging.
• •Mobile First: Write styles for mobile first, then add md:, lg: prefixes.

6. Directory Structure (Feature-First)

app/
├── (marketing)/     # Route group
├── dashboard/
│   ├── page.tsx
│   ├── layout.tsx
│   ├── _components/ # Private feature components
│   └── loading.tsx
components/          # Shared components (UI Kit)
lib/                 # Utilities and helpers
hooks/               # Shared hooks
types/               # Global types

7. Security

• •XSS: React escapes by default, but be careful with dangerouslySetInnerHTML.
• •Auth: Use NextAuth.js (Auth.js) or Clerk. Protect routes via Middleware.

Checklist before PR:

• • Is 'use client' used only where necessary?
• • Are lists using stable key props?
• • Is data fetched on the server where possible?
• • Are images optimized?