Wildcard Subdomains rewrite to paths (or how to create a Subdomain SaaS in one NextJS Project)

[fairhat]

I've been researching the whole internet on how to solve this problem.... Here you go.

Let's say you have a wonderful saas and bought a domain on vercel: mysupersaas.com
And now you want to enable Wildcard subdomains for your customers: {user}.mysupersaas.com

But you don't want to manage a separate project for every customer nor lose SSG just to get the host header!

Well, try this then:

// next.config.js

module.exports = {
  async rewrites() {
    return [
       {
        has: [
          {
            type: "host",
            value: "(^|\s)localhost",
          }
        ],
        source: "/",
        destination: "/actual-index",
      },
      {
        has: [
          {
            type: "host",
            value: "(^|\s)mysupersaas.com",
          }
        ],
        source: "/",
        destination: "/actual-index",
      },
      {
        has: [
          {
            type: "host",
            value: "(?<user>.+)\.localhost",
          },
        ],
        source: "/",
        destination: "/user/:user",
      },
      {
        has: [
          {
            type: "host",
            value: "(?<user>.+)\.localhost",
          },
        ],
        source: "/:path*",
        destination: "/user/:user/:path*",
      },
      {
        has: [
          {
            type: "host",
            value: "(?<user>.+)\.mysupersaas\.com",
          },
        ],
        source: "/",
        destination: "/user/:user",
      },
      {
        has: [
          {
            type: "host",
            value: "(?<user>.+)\.mysupersaas\.com",
          },
        ],
        source: "/:path*",
        destination: "/user/:host/:path*",
      },
      ]
  },
}

Obviously the localhost part is just for dev environments so change it according to your needs.
Now you can create pages in /pages/user/[user] and subpages in that folder and they will be matched with the users!
To get your specific username and keep static optimization you obv. have to provide getStaticProps and getStaticPaths functions like this:

// pages/user/[user]/index.tsx or pages/user/[user]/subdirectory/whatever/you/want.tsx

export async function getStaticProps(context) {
  const user = context.params.user;

  return {
    props: {
      user,
    },
    revalidate: 10,
  };
}

export async function getStaticPaths() {
  return {
    paths: [],
    fallback: true,
  };
}

const UserPage = ({ user }) => <div>Hello {user}!</div>;

export default UserPage;

Now your users can see their spaces at {user}.mysupersaas.com (also mysupersaas.com/user/{user}, but who wants that anyways).
Also you can still use mysupersaas.com/whatever/route/you/want
Just make sure that your root pages/index.tsx is now called actual-index.tsx

Also note that for whatever reason any route for your main site (mysupersaas.com) is accessible on subdomains too, eg:
mysupersaas.com/pricing leads to the same page as userx.mysupersaas.com/pricing.
So make sure they dont conflict and hope that your end-users wont accidentally use these urls >.<

Not sure how this behaves on Vercel hosted nextjs projects, but i'm using a VPS to host my nextjs instance and with a reverse-proxy setup (nginx/ i'm using caddy) it seems to work at least.

BRB continuing to build my actual software after fighting this for days

BTW: i18n works too! (as long as you're not using domain locales)

[qqpann]

Awesome post!
Is it possible to put i18n before the user path?

p.s.
Figured out it is possible.

      {
        has: [
          {
            type: 'host',
            value: '(?<series>.+)\\.localhost',
          }
        ],
        source: '/:locale/user/:path*',
        destination: '/:locale/series/:series/user/:path*',
      }