Add subdomain routing example

[ardyfeb]

Nextjs is awesome framework, but i have website with subdomain

• blog.domain.com
• forum.domain.com

I want to handle them on single app with nextjs, like laravel routing system allow use multiple subdomain on single app

[Enalmada]

Does zones not cover your use case?

[svobik7]

Hello @ardyfeb,

did you find any solution for easy subdomain routing with serverless target app?

[xyNNN]

Any input for this topic? It's possible to create multiple zones with a different subdomain and not based on the URL path? Thanks for this awesome tool!

[janmallari]

Any updates on this topic? Would really love to have subdomain routing.

[khairulaffandy]

hopefully, Vercel will implement subdomain routing in the near future. a subdomain would be very useful in organizing links and pages.

[dcangulo]

I don't know if this is the right way to do this. But I'm able to reroute NextJS pages to subdomains using a custom express server. See: https://github.com/dcangulo/nextjs-subdomain-example

[pie6k]

@dcangulo thank you for your example. However, your example assumes you create custom server. It will not work with serverless approach which has many benefits.

[kushthakker]

Any update on this??

[Jarrodsz]

Any updates on this??

[kushthakker]

I came across a thing called mono-repo, you can check it out here. It's not the exact way we wanted it to have, like subdomains routes handled in single serverless next.js project but it's kinda close to it.

[ardyfeb]

I re-opened this issue because no official way to do this.

@kushthakker @Jarrodsz @janmallari

To work with this case i utilize webserver / reverse proxy (nginx / caddy) to rewrite url into subdomain.

Example:
blog.domain.com -> domain.com/blog
forum.domain.com -> domain.com/forum

[ihadabs]

Any updates on single next app with subdomains?

[arirah]

@ardyfeb did you solve this?

[ardyfeb]

@arirah i utilize web server / reverse proxy to map url from sub.domain.com to -> domain.com/sub

so on application side just receive params from domain.com/:user

[hc0503]

I have got same problem in my project.
@ihadabs , did you resolve this?

[ihadabs]

I have got same problem in my project. @ihadabs , did you resolve this?

nope

[hc0503]

Hi @ihadabs ,
I've resolved the problem with rewrite.
Check this middleware feature of NextJS.
https://nextjs.org/docs/advanced-features/middleware

You can rewrite the response to the page when request subdomain is matched expected page route.
This is the example of Vercel.
https://github.com/vercel/platforms

[volnei]

I noticed that searchParams no forwarding with rewrite :(
Did you solve this?

[thiagomurtinho]

There are at least 3 ways to implement subdomains using Next.js. I advise reading the blog posts on the Vercel website that discuss some of these methods.

How to Build a Multi-Tenant App with Custom Domains Using Next.js

Subdomains, wildcard domains, and apex domains

Can I redirect from a subdomain to a subpath?

rewrites() {
    return {
        beforeFiles: [
            // if the host is `app.acme.com`,
            // this rewrite will be applied
            {
                source: '/:path*',
                has: [
                    {
                        type: 'host',
                        value: 'app.acme.com',
                    },
                ],
                destination: '/app/:path*',
            },
        ]
    }
}

An example rewrite object configuration inside next.config.js.. Only paths with app.acme.com will be rewritten.

[volnei]

In this example, searchParams will be forwarded to destination?

[thiagomurtinho]

Yes, because what happens is a route rewrite. Behind the scenes, there is a reverse proxy that handles everything related to routes. It is very valuable to study the rewrite feature of next.config. I use it to handle access to endpoints that use VPN with a jump through the nextjs reverse proxy.

Nextjs - Rewrites Doc.

[darkdeathoriginal]

cant user go to that subdomain will /app also

[panigrah]

I have a simpler usecase and struggling to make this work. I have the following in my next.config.ts, and have subfolders in my app with different pages and layouts. Although the redirect works - it seems to also try to redirect all the public and _next pages resulting in errors while rendering the subpages.

{
  beforeFiles: [{
    source: ':path*',
    has: [{ type: 'host',  value: 'abc.mydomain.com' }],
    destination: '/abc/:path*',
  },{
    source: ':path*',
    has: [{ type: 'host',  value: 'xyz.mydomain.com' }],
    destination: '/xyz/:path*'
 )]
}

I get 404 not found errors on all of the pages it tries to load such as http://abc.mydomain.com/_next/static/chunk/*

[lu-zen]

I managed to make it work using afterFiles, but it's necessary to remove the root page and rewrite to paths, or next will evaluate the root page and skip rewrites;
Eg.:

• app
  • site
  • blog

async rewrites() {
    return [
      {
        source: "/:path*",
        destination: "/blog/:path*",
        has: [{ type: "host", value: "blog.example.com" }],
      },
      {
        // fallback
        source: '/:path*',
        destination: '/site/:path*',
      }
    ];
  },

[mi-tec]

this is what i did

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

export default nextConfig;

but when i load admin.localhost:3000 i still load 'localhost:3000'

i couldnt catch what wrong I did here

[fsultani]

I struggled with this one a little, but I found a solution that's working nicely for me, and wanted to share. I don't know if it's the best way, but it works.

My use case was pretty simple: most users will go to example.com, but an admin user will go to admin.example.com. I wanted to use two different layouts depending on the subdomain.

I tried with routing, but I had some trouble getting it to work for me, and I wasn't sure if it was the right solution for my use case.

Instead, I set response headers in a middleware function based on the host name. Something like:

export function middleware() {
  const hostname = headers().get('host');
  const isAdminSubdomain = hostname.split('.')[0] === 'admin';
  const response = NextResponse.next();
  response.headers.set('isAdmin', isAdminSubdomain);

  return response;
}

export const config = {
  matcher: '/',
}

Then, in the root component (not the layout because it wasn't working properly there), I used headers to check the header value, and rendered a component based on that value:

export default function Home() {
  const isAdmin = headers().get('isAdmin') === 'true';

  if (isAdmin) return <AdminPage />;

  return <Dashboard />
};

Of course, you'd have to handle auth in the admin page.

For local development, I also had to modify my /etc/hosts to include 127.0.0.1 admin localhost. This allowed me to use admin.localhost:3000.

[fabianL1310]

I have this in my middleware.ts:

import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  if (!request.nextUrl.pathname.startsWith('/_next')) {
    const subdomains = request.headers
      .get('host')
      ?.split('.')
      .slice(0, -+(process.env.DOMAIN_PARTS ?? 0))
      .map((subdomain) => `/${subdomain}`)
      .join('');

    return NextResponse.rewrite(
      new URL(
        (subdomains?.length ? subdomains : '/index') + request.nextUrl.pathname,
        request.url
      )
    );
  }
}

in the .env the DOMAIN_PARTS variable the Number of parts your base domain consists of. Each part is separated with a dot. For exaple if you are hosting on localhost:3000 DOMAIN_PARTS would be one. If you are hosting on mydomain.com it has to be 2.

The folder structure inside your pages folder should look like this

├── index
│   ├── index.tsx
│   └── page1.tsx
├── subdomain1
│   ├── index.tsx
│   └── page2.tsx
├── subdomain2
│   ├── index.tsx
│   └── page3.tsx

in the index folder are the pages without any subdomain. It works if I host it locally. I have not tried it when it is deployed with a custom domain.