Skip to main content

Best Practices

What does a codebase in peak condition look like?

BEFORE WORK          DURING WORK          BEFORE DEPLOY
─────────────        ────────────         ──────────────
Types compile?       Server-first?        Lighthouse green?
Tests pass?          Layer boundaries?    Bundle size stable?
Dependencies clean?  No prop drilling?    Auth on all routes?

Best practices aren't advice — they're pass/fail gates. Every item below either passes or it doesn't. Run these before shipping.

Pre-Deploy Checklist​

The master gate. Covers every dimension. Items link to deep dives.

Architecture​

  • Domain types compile — no any or @ts-ignore added
  • Layer boundaries respected — domain never imports outward
  • Server-first — Client Components only where interactivity required
  • No prop drilling — use composition, context, or server components
  • Components under 100 lines, under 7 props each
  • Data transformations explicit at layer boundaries (domain → contract → view)

Performance​

  • Lighthouse Performance score above 90
  • LCP under 2.5s, CLS under 0.1, FCP under 1.8s
  • Bundle size unchanged or reduced (check with next build output)
  • Images use next/image with explicit width/height
  • Dynamic imports for heavy components (next/dynamic)
  • No render-blocking resources in critical path

Security​

  • Auth middleware on all protected routes
  • Server Actions validate input with Zod
  • No secrets in client bundles (check NEXT_PUBLIC_ usage)
  • CORS configured (no wildcard in production)
  • Rate limiting on sensitive endpoints
  • CSP headers configured

Memory​

  • No event listener leaks (cleanup in useEffect return)
  • No unbounded state growth (paginate, virtualize)
  • Server Components for data-heavy renders (no hydration cost)
  • DOM tree under 1500 nodes per page

Costs​

  • Static pages use ISR or SSG (not SSR)
  • API routes have response caching where appropriate
  • Image optimization via built-in loader (not external)
  • Edge functions for latency-sensitive, lightweight logic

Testing​

  • Layer selection rule applied — cheapest test that covers the change
  • Server action logic tested at L2 integration, not L3 E2E
  • Zod schemas validate all data boundaries
  • E2E reserved for browser-dependent flows only
  • Tests run against preview deploy, not localhost

Learning Path​

The mastery checklist maps the critical path from RSCs to production — component patterns, data strategy, architecture, and every skill grouped by capability area with clear progression.

Context​