Comment structurer une application Next.js pour passer à l'échelle

Next.js is flexible. That flexibility is a gift for small projects and a trap for large ones. Without clear conventions, a Next.js codebase with 100+ routes becomes a maintenance nightmare.

Here are the architectural decisions we enforce on every large-scale Next.js project at Heedfx.

Folder structure that scales

We separate concerns by feature, not by file type. Instead of a flat components/ directory with 200 files, we organize by domain:

• src/app/ — Route handlers and pages only. No business logic here.
• src/components/ui/ — Reusable, domain-agnostic UI primitives
• src/components/sections/ — Composed page sections
• src/components/layout/ — Layout-level components (Header, Footer)
• src/data/ — Static data files and type definitions
• src/lib/ — Shared utilities, API clients, and helper functions

Data fetching patterns

With the App Router, the temptation is to fetch data everywhere. Resist it. We establish clear data-fetching boundaries: server components fetch data, client components receive it as props.

For frequently accessed data, we use React's cache() to deduplicate requests within a single render pass. For data that changes per-user, we use route handlers as a clean API layer.

TypeScript is non-negotiable

Every Next.js project at scale needs strict TypeScript. Not just enabled — strict. The 30 minutes you spend writing types saves 3 hours of debugging runtime errors in production.

We type all API responses, all component props, and all route params. Zod schemas validate external data at the boundary; TypeScript handles everything internal.

Performance from the start

Performance isn't an optimization you bolt on later. We enforce performance budgets from the first sprint: Core Web Vitals targets in CI, bundle analysis on every PR, and automatic lighthouse checks in staging.

The biggest wins: dynamic imports for heavy components, properly sized images via next/image, and font optimization with next/font. These aren't advanced techniques — they're table stakes.