NextJS + Netlify: Multi Zones/Domain Routing

Hey There,

We are working with a client that has several departments to their business. Each department would like to have their own section on the website with their own subdomain. The departments all follow a similar styling & layout to the home directory so ideally we would only like to have one install to make updates easier.

What is the best way to route these domains on a single NextJS Application with Netlify? Are we able to use a similar method to this on Netlify? Is there a better way?

Example structure rewrite below:
example.com (base)
example.com/department1 → department1.example.com
example.com/department1/page1 → department1.example.com/page1
example.com/department2 → department2.example.com
example.com/department2/page2 → department1.example.com/page2

Hi @dana-blackbean,

Sorry if I haven’t understood this completely, but I believe it’s possible like this (correct me if that’s not what you’re looking for):

You can deploy a single repo as an individual website for each of its folder. Then, on the base website, where you’d add the example.com domain, you can set the redirects as:

https://www.example.com/department1/* https://department1.example.com/:splat 200!

This is the syntax for _redirects file.

In the site for department1, you need to connect the department1.example.com domain.

1 Like

Hey @hrishikesh,

Thanks for the reply. Yes, that sounds correct!

Just to be clear on what you are recommending. Currently we have all departments under one website. We would need to create a new websites for each department in the same repository. Then we could build each of those sites individually. Finally once those are created we could point our domains/subdomains directly at our Netlify project. Am I understanding that correctly?

Do you have any examples of a setup like this?

Unfortunately, I do not have an example ready, but can take some extra steps to explain if needed - though I believe you’ve got most of it correct. Even then, just to be sure:

Based on this example that you’ve shared:

I can see that each website is an entirely separate app with its own set of packages, files and folders that don’t seem to be overlapping with the other folders. So taking the above repo as an example you can:

  1. Create a site with home as the base folder and deploy that. This would be the “base” site you’re talking about and would have the redirect I’ve mentioned above.
  2. For every other folder (like blog and docs in the above repo), you can create a separate site with those folders as the base path. Add the required domains to these sites.

Again, if you’ve a different setup, or need further clarifications, feel free to revert.

Awesome, so my only question then with two website + being built do we need to alter the “build settings” in Netlify so each site can be built individually? If so what would that look like?

Each site would have the same settings, except for the base path. Like I’ve mentioned above, the site on which you wish to build the home folder should have the base path as home, blog should have blog, etc. As long as each of these folders run as a separate Next.js app, you should be okay. Other settings like build command, publish folder, etc. should be same.

1 Like

Great thanks for the info! I will give that a shot and reach out if I run into any roadblocks. :+1:

1 Like