Summary

Incrementally adopt Next.js into an existing application to modernize without a full rewrite. The article outlines three practical strategies—subpath mounting, rewrites/proxying, and micro-frontends via monorepos/subdomains—that let you add React/Next.js pages gradually, improve Core Web Vitals, and increase developer productivity with minimal disruption.

Key Points

• Subpath: Host a Next.js app under a specific path (e.g., example.com/store) and set basePath in next.config.js so assets and links resolve correctly.
• Rewrites: Serve Next.js at the root and use rewrites to proxy unknown routes to your legacy app; Next.js handles new pages while existing routes remain intact.
• Micro-frontends & Monorepo: Split frontend work into smaller apps deployed on subdomains from a monorepo (Vercel supports branch previews and simplified CI/CD).
• Benefits: Enables incremental migration, preserves existing functionality, improves page load and Core Web Vitals, and speeds developer feedback with Fast Refresh and deploy previews.

Practical next steps

• Start small: pick a single section (marketing page, store) and implement it with basePath or rewrites.
• Configure next.config.js and test routing locally before switching proxies or DNS.
• When scaling, adopt a monorepo + Vercel workflow to enable subdomain deployments, branch previews, and simpler CI/CD.