Building Scalable Next.js Apps

Scaling a Next.js app beyond 'it works on my machine' requires deliberate architecture. Here's what I've learned shipping production apps to hundreds of thousands of users.

Why Architecture Matters Early

Most Next.js apps start as a single pages/ folder and a prayer. That works until it doesn't — and when it breaks, it breaks loudly. I've seen codebases where a single route file is 2,000 lines long. That's not a codebase, that's a haunted house.

The patterns I'm sharing here came from shipping apps that serve real traffic — not toy projects. They're opinionated, battle-tested, and sometimes uncomfortable.

Folder Structure That Scales

Stop thinking in file types. Start thinking in features. Group everything related to a domain together — components, hooks, utils, types — under one folder.

src/
  features/
    auth/
      components/
      hooks/
      lib/
      types.ts
    dashboard/
    billing/
  shared/
    ui/
    hooks/
    utils/

The Barrel File Trap

Index files feel clean until they become the reason your build takes 40 seconds. Tree-shaking hates barrel files. Keep them shallow — one level deep max.

Data Fetching Patterns

With the App Router, the mental model shifted. Server Components fetch on the server. Client Components are for interactivity only. The rule I follow: if it doesn't need state or event handlers, it's a Server Component.

Parallel vs Sequential Fetching

Sequential fetches create waterfalls. Use Promise.all for independent data, and Suspense boundaries to stream UI progressively. Your TTFB will thank you.

Caching Strategy

Next.js caching is powerful and confusing in equal measure. My mental model: cache aggressively at the data layer, invalidate deliberately, and never rely on default behavior without reading the docs first.

Performance Wins That Actually Matter

Image optimization, font subsetting, and bundle analysis are table stakes. The real wins come from route-level code splitting and eliminating client-side JavaScript where it isn't needed.

Measuring What Actually Matters

LCP, CLS, INP — not Lighthouse scores. Lighthouse is a lab metric. Real users are on 4G in bad conditions. Test with WebPageTest and real device throttling.