Subdomain and Multi-Tenant Routing in Next.js

Hostname-based routing lets one deployment serve a marketing site and a blog, or many tenants, from different subdomains. The mechanics differ between a server deployment and a static export.

Middleware rewrites on a server

On a Node deployment, middleware can read the Host header and rewrite blog.example.com to an internal /blog path. This keeps a single app while presenting distinct sites per subdomain.

const host = req.headers.get('host') ?? '';
if (host.startsWith('blog.')) {
  return NextResponse.rewrite(new URL('/blog' + url.pathname, req.url));
}

Static exports need a proxy

A statically exported site has no server to run middleware, so hostname routing must happen in front of it — a reverse proxy or CDN rule. In development, a small Node proxy that routes by Host header reproduces the production split.

Local development

Browsers resolve any *.localhost name to 127.0.0.1, so blog.localhost works with no hosts-file edits. Point your proxy at the right upstream per hostname and the dev experience matches production.

Why this matters in real projects

It is easy to treat next.js as a checkbox, but in production the details decide whether a system stays maintainable. Teams that invest early in getting next.js right spend far less time later untangling incidental complexity, because the foundations hold up as the codebase and the team grow.

In the context of next.js, the cost of a poor decision compounds quietly. A shortcut that saves an afternoon can cost weeks once it is woven through dozens of files and several people's mental models. The patterns described above are popular precisely because they keep that compounding cost in check and keep change cheap.

There is also a human dimension that is easy to overlook. Code is read far more often than it is written, and the clarity of your approach to next.js directly shapes how quickly a new teammate becomes productive. When the structure mirrors how people already think about the problem, onboarding shrinks from weeks to days and reviews become conversations about intent rather than archaeology.

Going deeper

Once the basics are in place, the next gains come from understanding the trade-offs rather than memorising rules. Next.js is not free: every abstraction you introduce buys flexibility in one direction while adding a layer to reason about in another. The teams that do this well make those trade-offs consciously, write them down, and revisit them when the constraints change. That habit of deliberate decision-making is what separates a codebase that ages gracefully from one that calcifies.

It helps to keep a short feedback loop between a change and its effect. Whether that loop is a fast test suite, a metric on a dashboard, or a teammate's review, the goal is the same: shorten the distance between a decision and the evidence about whether it was a good one. When that distance is small, you can move quickly with confidence; when it is large, even careful teams drift.

How this fits a modern stack

Next.js rarely lives in isolation. In a typical Nextware project it sits alongside a typed full-stack codebase, a CI pipeline that runs on every pull request, and a deployment process that favours small, frequent releases over big-bang launches. The ideas in this article are written with that reality in mind, so they slot into an existing workflow rather than demanding a rewrite.

The combination of next.js and middleware, applied with restraint, tends to produce systems that are both pleasant to work in and cheap to change. That is the bar worth aiming for: not the cleverest possible solution, but the one your team can extend safely a year from now without rediscovering why every decision was made.

Common pitfalls to avoid

Most of the trouble we see is not exotic. It comes from a small set of recurring mistakes that are obvious in hindsight and invisible under deadline pressure.

• Optimising before measuring — changing next.js based on a hunch instead of a profile or a metric.
• Hidden coupling — letting middleware leak across boundaries until nothing can change in isolation.
• Skipping tests for the parts that matter most, then paying for it during the next refactor.
• Copying a pattern from a much larger company without their constraints, and inheriting the overhead without the benefit.

A practical checklist

1. Write down the problem you are actually solving before reaching for next.js.
2. Start with the simplest approach that could work, and add structure only when a real pain appears.
3. Make the change observable — logs, metrics, or tests — so you can tell whether it helped.
4. Document the decision briefly so the next person understands the trade-off.

Key takeaways

• Next.js rewards simplicity; complexity should be earned, not assumed.
• Next.js and Middleware pay off most when applied deliberately at the right boundary.
• Measure, then optimise — never the other way around.
• Optimise for the team that maintains this in six months, including future you.

Wrapping up

None of this requires heroics. The teams that ship reliable software are usually the ones that keep their tools boring, their boundaries clear, and their feedback loops fast. Apply the ideas here incrementally, keep what works for your context, and discard what does not.

If you are building something in this space at Nextware Systems or elsewhere, the best next step is to pick one concrete improvement from the checklist above and ship it this week. Small, measured changes compound into systems that are a pleasure to work in — and that is the whole point.