Rewrites based on subdomain

[TheRusskiy]

Describe the feature you'd like to request

Right now Next.js is lacking support for routing based on subdomains.
E.g. we want to have dynamic subdomains for different companies/customers.

company1.example.com
company2.example.com

/ path for these URLs should return different results.

Describe the solution you'd like

One solution that Next.js could do is to implement subdomain matching in rewrites:
https://nextjs.org/docs/api-reference/next.config.js/rewrites
It could be something like

module.exports = {
  async rewrites() {
    return [
      {
        source: '/:path*',
        has: [
          {
            type: 'subdomain',
            key: /^(?!www)/ // match anything except www
          },
        ],
        destination: '/company/:subdomain/home,
      }
}

Describe alternatives you've considered

The only alternative I can think of is placing everything behind Nginx and doing a bunch of rewrites manually.

[ijjk]

Hi, can this not already be achieved using type: 'header' and key: 'host' with has?

[TheRusskiy]

@ijjk hm... I have to say that I never considered built-in headers as headers, since the example mentions x-header, but that's a good idea!
This just might work, I am gonna have to test this approach later. 🙇

[diegossena]

I solved it with the following code

module.exports = {
  async rewrites() {
    return [
      {
        source: '/api/:path*',
        has: [
              {
                type: 'host',
                value: '(?<subdomain>.*)\\..*',
              },
        ],
        destination: `http://:subdomain.example_host:8080/:path*`
      }
}

[jfbaraky]

I've done it using the Next.js Middleware:
https://medium.com/@jfbaraky/using-subdomains-as-paths-on-next-js-e5aab5c28c28

[palbrecht1]

This is still useful for me in Aug 2024

[lrob7325]

Here to piggy back and say as Oct 2024, it's working. This is a clean and elegant solution that doesn't require going into the next.config, and works flawlessly with aws amplify.

[mi-tec]

below is my code

/** @type {import('next').NextConfig} */
const nextConfig = {
	async rewrites() {
		return [
			{
				source: '/admin/:path*',
				has: [
					{
						type: 'host',
						value: 'admin.localhost',
					},
				],
				destination: 'http://admin.localhost:3000/:path*', // Admin routes
			}
		]
	}
};

export default nextConfig;

but even if i loads

admin.localhost:3000

my FE end shows main app page