Next.js App Router Architecture for Marketing Sites

Marketing sites grow messy when every page becomes a one-off layout. With Next.js App Router, the opportunity is clearer: keep route files thin, push business UI into feature modules, and default to Server Components so JavaScript only ships where interaction requires it.

Thin routes, thick features

A `page.tsx` should mostly compose metadata and a feature landing component. Content catalogs, filtering logic, and section composition live under `src/features/*`. That boundary keeps routing stable while product pages evolve.

• Route files: metadata, params, compose feature pages
• Feature modules: UI, content, schemas, domain helpers
• Shared UI: primitives and patterns reused across pages

Server Components by default

Landing heroes, article bodies, and SEO schemas rarely need client state. Reserve Client Components for menus, filters, carousels, and forms. The result is faster first paint and simpler accessibility for static content.

Colocate SEO with the feature

JSON-LD builders and breadcrumb helpers belong next to the feature they describe. Shared utilities like `createPageMetadata` stay in `src/lib/seo`, while page-specific graphs live with the module.

Scaling checklist

• One feature folder per product surface
• Shared chrome extracted from protected homepage modules
• Static params for known slugs
• Sitemap entries generated from the same content source