NextJS default routing but with namespace

Question

I'm developing a site that has 2 variations.

Current setup just re-routes but I don't want the site version to show up in the URL.

url: localhost/site1/dashboard
path: /pages/site1/dashboard

url: localhost/site2/dashboard
path: /pages/site2/dashboard

The two versions are very similar so they share a component in common. I wanted the user to select from a menu and it changes an internal config that then refreshes without changing the URL.

How I can remove site1/site2 from the URL?

Is there a way to specify to next js some namespace that I can specify in_app.js at runtime?

Answer 1

You can't do it at runtime. Next.js supports rewrites but it's configured in next.config.js. Can't dynamically, based on user input, overwrite Next.js server configuration.

If pages are the same you could unite two versions into one. You can save user selection and just show different components / content / styles based on the user preference.

As alternative, you could show different versions on different subdomains.

Otherwise, you'd have to write your own server to handle this kind of routing.