Hi, I'm Fadil Bafagih

Fadil Bafagih•Oct 28, 2026•2 min read

Next.js 16 Multi-Domain Architecture: Isolating Public Web and Admin CMS within a Single Codebase

When building scalable web applications with Next.js, engineering teams frequently face an architectural trade-off: should you manage separate repositories for your public landing pages and internal CMS dashboard, or unify them into a single monorepo? Maintaining multiple repositories introduces overhead: duplicated TypeScript schemas, double database configuration, and tedious design system synchronization. Conversely, placing /dashboard and /login alongside public pages creates unnecessary security surface exposure if administrative paths are discovered by automated crawlers. The modern solution to this challenge is implementing an Advanced Reverse Proxy / Middleware Layer in Next.js with domain-level boundary isolation. Multi-Domain Routing Topology The proxy intercepts incoming traffic right at the edge entry point by inspecting the Host or x-forwarded-host headers: Why 404 Rewrites Outperform 302 Redirects A common anti-pattern is using standard HTTP redirects (302 Found or 307 Temporary Redirect) when unauthorized visitors access /dashboard, redirecting them to /login or /. From an information security standpoint, an HTTP redirect confirms to automated penetration scanners that the route exists behind access control. By issuing a NextResponse.rewrite pointing to the /not-found component, the server returns an authentic 404 Not Found response. Automated vulnerability scanners register the path as completely nonexistent. Next.js Proxy Implementation Here is a production-ready proxy pattern demonstrating clean multi-domain isolation: Hybrid Internationalization (i18n) Strategy Another key challenge in a unified codebase is balancing different internationalization needs: Public Domain (Path-based Routing): Requires /en/... and /id/... sub-paths to allow search engine bots to crawl and index localized content independently. Admin Dashboard (Zero-Refresh Client State): Administrative users prefer clean URLs without path prefixes. Language preferences are stored in cookies (admin-language) and managed instantaneously via React Context. Ensure your session cookies specify SameSite=Lax and configure root domain scoping (.example.com) only if session sharing between domains is intentionally required. Conclusion By employing a multi-domain proxy pattern in Next.js, engineering teams achieve maximum operational simplicity without compromising on security. One unified build and deployment process delivers two isolated web experiences tailored for their specific audiences.