Multi Tenancy App and Incremental Static Generation

[nicosh]

I'm trying to build a multi tenant app, so differents websites will be served by the same app, and depending on the hostname different data will be fetched (like metatags,css and so on)

I know this can be achieved using getInitialProps, getServerSideProps or even with HOC, but using Incremental Static Generation with fallback sounds at least interesting.

The main problems here are 2:
fist one is to determine the hostname a page belongs so generate X pages for Y hostnames ,
and then how to serve the right pages to the right hostnames.

The only solution i can see is build pages urls as follow /hostname_id/products/[id] but this approach sucks especially for all non-dynamic pages (like /).

So my question is : can somehow getStaticProps work with full urls instead page paths?
any other ideas on how to implement a multi tenant app would be also appreciated.
Thanks 🙏

[lfades]

Update: we recently launched the Platforms Starter Kit that's a comprehensive template for building multi-tenant applications with built-in custom domains support + ISR. We also removed the 50 custom domain limit for all Pro teams on Vercel.

---

Try with:

• pages/[hostname].js
• pages/[hostname]/products.js
• pages/[hostname]/products/[id].js

In every page you can provide the list of known hostnames and pre-render based on that.

[fernandobandeira]

You're right @nicosh but the reverse proxy will solve that, the proxy will receive the /example request and request /hostname/example internally to the next.js app, you can use something like nginx to handle it.

So for next.js it'll be as if the hostname is always a part of the path and it'll always serve the correct /build/hostname/example then.

I've tested this PoC a while ago and it works just fine, you can use a rule to match the host and dynamically append it before the request path. I'd suggest that you use something like openresty or kubernetes instead of plain nginx though so you can auto issue all of the certs for your tenants automatically.

I'll try to get a repo with the PoC and we can share it as an example.

[fernandobandeira]

@lfades @nicosh Actually this strategy doesn't work, I've submitted a bug report here: #17581

[fernandobandeira]

The issue was deleted so it's prob not gonna be a supported usecase

[timneutkens]

It wasn't deleted, it was moved to discussions as it's not a bug report but a feature request.

[ghost]

@lfades Using the method you described using a reverse proxy, I get the following:

(xxx.xxx.167.161 is the IP address from where I am pointing to a vercel project).
I only get 404 when using Vercel. Whenever I use a proxy that points to another server (not Vercel), it does show the content of the webpage I am pointing to.

Any solutions for this?

[rmachado]

This is a blocker for us moving to Next, since changing url structure makes no sense in our case. If we could get the hostname in getStaticProps context would solve this problem.

[nicosh]

Sadly @leerob solution works only with SSG pages i dont think it works with ISR

[leerob]

@michrome It's open-source! It's two domains to a single Vercel project. This makes more sense if you're thinking 100-1000+ domains because you wouldn't want a separate project for each one.

@nicosh It's not using either of those. It's using SSR - check out the demo for more information on the landing page.

[michrome]

Hey @leerob I was wondering more about the Vercel configuration: is there a way of pointing multiple subdomains of vercel.app (specifically vercel.app) to one project?

Perhaps you have access to the vercel.app DNS records 😀

[leerob]

Yeah you can add multiple as long as they’re not taken already 👍🏼 That’s what I’m doing in my example.

[michrome]

Got it! Didn’t even think to try that as just assumed it wouldn’t work. Thanks!

[ghost]

What is the current status of multi tenancy in NextJs without being dependent on a Custom Server? Are there plans on building this functionality?

[raholland79]

I'm also curious

[leerob]

https://multi-domain-first.vercel.app/

[raholland79]

Thank you, looks great.

[ghost]

@leerob Thanks for thinking of potential solutions and for the demo!

Currently we have our site built based on ISR, so unfortunately the SSR + cache solution is far from ideal, since it needs rewriting. I tried using the solution suggested by @lfades with 'pages/[hostname].js', but the reverse proxy gave me a 404 (problem described under his answer).

Are there any plans within the NextJS team on building Multi-Tenancy with ISR that can be hosted on Vercel as one application?

[leerob]

Update: we recently launched the Platforms Starter Kit that's a comprehensive template for building multi-tenant applications with built-in custom domains support + ISR. We also removed the 50 custom domain limit for all Pro teams on Vercel.

---

As mentioned in previous comments above, this is a great example of multi-tenancy using SSR + caching: https://multi-domain-first.vercel.app/. Another example is http://static.fun/.

As this comment shows, you can use ISR, it just depends on your use case (e.g. how you want your URLs structured).

[jmotes]

@leerob would Next.js rewrites help achieve multitenant ISR without adjusting urls to include the hostname in the path?

Thanks for your work on multitenant SSR btw! I've got it working pretty well but on low traffic sites where the cache will regularly expire, initial page loads are taking about 2 seconds when pulling data for the page from Firestore. So I'm hoping to get ISR working instead...

[ghost]

@leerob, thanks for your hard work! I end up using the SSR method as well, which works good. However, I agree with @jmotes. Hopefully there will be ISR in available for Multi-tenancy NextJs apps in the near future!

[digitalbase]

As we're in the process of converting part of our app (public facing websites) to next.js I wanted to share a bit what I learned around multi-tenancy in next.js so far:

• https://www.reddit.com/r/nextjs/comments/kprinh/multitenancy_in_nextjs/
• https://www.reddit.com/r/nextjs/comments/mi9dg9/had_anyone_on_here_had_any_experience_using/

Specific codebases I found that do something related:

• https://github.com/vercel/static-fun (wildcard domains)
• https://github.com/micheleriva/multitenant-nextjs (i think early version of krabs)
• https://github.com/micheleriva/krabs (express middleware)
• https://github.com/prezly/theme-nextjs-starter (starter theme that supports injecting env variables using HTTP headers)

Our approach in short is:

1. allow next site to read config from http headers
2. not use .env
3. add layer (HTTP proxy, haproxy or custom middleware) that injects .env config from outside

[micheleriva]

If that could help, I developed an Express.js middleware for achieving multi-tenancy with Next.js: https://github.com/micheleriva/krabs.
I feel like it gives you more control, as you may need to pass multiple configurations to your Next.js app depending on the tenant you're rendering.
SSG is not supported, but I don't see it as a problem, as I strongly recommend putting the server behind a CDN such as Cloudflare/Akamai, which can serve a static version of your pages and implement ISR by purging the cache via API on request.

I'm studying how to deploy +200 sites this way, so feel free to reach out if you have more questions!

[digitalbase]

We're doing 10k sites but instead of injecting it with custom middleware we're using ingress/nginx config for it.

app talks to kubernetes -> ingress config is generated -> every host has it's own config injected -> next apps behind it are stateless (get all config from outside)

[micheleriva]

Maybe it's a stupid question, but you're managing multi-tenancy at a k8s level, right? You actually have more than one Next.js app on different pods I guess

[digitalbase]

Yep. We have a dynamic fleet of 1-10 pods running the different themes. So effectively 1 deployment per 'theme' where ingress points the right hostnames to the right pods based on the theme they selected.

[micheleriva]

@digitalbase I gotta be honest, I like that solution more. Managing multi-tenancy at the k8s level makes it way easier to handle horizontal scaling and add more websites. Sadly, sometimes it is not an option, and we have to fall back to solutions such Krabs or similar ones. They still work, by the way, but they're not my favorite ones 🙂

[mjaykays]

@digitalbase can you share the arch for how you managed the 10k+ sites.

I am also working on something like you have already worked on. But in my case these are thin sites, or microsites consisting of not more than a page - more of like marketing lead funnel sites. I am anticipating 200-300 sites, and I thought multi-tenancy would be a good option. Because currently we spawn a separate infra for a new site, and we are doing SSG atm using cloudfront.

I was thinking that it won't be scalable if we were to have 300 sites or more, so I was thinking to bring them down to a nextjs single server app and doing the routing using aws route 53 or krabs like @micheleriva has shared.

But I would love to explore how you have attacked this problem since you have a much bigger number than my target number :)

With nextjs server app, we will be losing on the ssg capabilities, since all of our sites are mostly static. Would love to hear your thoughts @micheleriva and @digitalbase

[nyn0x]

interesting approach #12848 (comment)

[rambabusaravanan]

Thanks @nyn0x, you took me to the exact approach I was looking for.

[zloegucci]

THANK YOU! Literally saved my life)))

[eric-burel]

Hi guys, cross-posting here from the more generic ticket about Multi-tenancy that I've opened (#20841), I've worked on a possible architecture for static (or ISR) multi-tenancy, without bloating the URL and without per-request SSR.
It's basically what @fernandobandeira introduced in a comment, using rewriting to process the request. Except that instead of altering the URL automatically, which still ends up adding the hostname to the final page and seems difficult to setup, I propose to use headers.

This means getStaticProps and getStaticPaths are improved to handle not only URL params, but also headers or cookies, which is totally feasible. That's however theoretical at the moment, as I lack the time to build an experiment :)

Article there: https://blog.vulcanjs.org/lets-bring-the-jamstack-to-saas-introducing-rainbow-rendering-ad1834fe62ff

[eric-burel]

Aaaand here goes the full implementation, using middlewares: https://blog.vulcanjs.org/render-anything-statically-with-next-js-and-the-megaparam-4039e66ffde

• Works for combination of parameters: tenant, but also the current locale, theme, A/B testing bucket
• Doesn't bloat the URL
• Doesn't bloat the code (it's around 30 lines of code)
• Purely static (but can be extended to ISR and can mix build-time and request-time rendering using fallback)

[eric-burel]

Small update: I've run an experiment with the same logic, but using only the HTTP cache: https://blog.vulcanjs.org/treat-your-users-right-with-http-cache-and-segmented-rendering-7a4f4761b549

TL;DR: the HTTP cache may make possible an architecture close to multi-tenant ISR in certain scenarios (public content in particular for instance a blogging platform like Medium), but ISR goes a step further as it's more flexible on the cache key for each variation of a page.

[osdiab]

FYI for those of you wondering if it's possible to do this via NextJS rewrites without a separate proxy layer + getStaticProps/Paths, I was able to get it working (but opted for @leerob 's SSR + caching strategy instead since it warps the codebase less and works well with Vercel's edge caching).

1. Put all your pages under a subfolder of pages - in my case, called `/pages/hosts/[host]
2. Update next.config.js to have a rewrite that looks something like this:

// next.config.js
async rewrites() {
    return {
      beforeFiles: [
        // put any other rewrites you want before the following one; afterFiles
        // seemed to not work reliably with this in place
        {
          // note this should have an exhaustive list of all the prefixes
          // you DO NOT want to be redirect to /hosts/[host]/... , which should
          // include any API routes and static files you host from the public/
          // directory; I suggest putting all public assets in an "assets" folder
          // to keep this simple
          source: "/:base((?!_next|api|robots.txt|assets|hosts).*)/:rest*",
          destination: "/hosts/:host/:base/:rest*",
          has: [{ type: "host", value: "(?<host>.*)" }],
        },
      ],
    };
  },

Then you should be able to static render based on host path. Note that host won't contain port number, so on local dev you're better off with subdomains of localhost (e.g. tenant1.localhost:3000) than trying to simulate tenants with different ports.

[eric-burel]

Yes rewrites are a blessing. The only limitation to this is that you have to bloat your pages folder with a weird structure of nested folders. That's why I'd love to see more parameters to getStaticPaths than just URL parameters. Coupled with Next 12 middleware system, this let's you fully control static rendering.
I also agree that using a dynamic approach and caching is most often equivalent and simpler. However I still fail to find enough educational resources targeted at frontend developers, because caching, edge computing etc. are historically devops concepts and not that easy to really grasp as a frontend dev.

[saisaran96]

@nicosh Did you find any solution for your problem ?

[eric-burel]

@saisaran96 Maybe check this: #17581 (the most recent comment link to the official Vercel example). Now with middlewares it should be possible to handle this cleanly with rewrites.

[steven-tey]

Quick update on this – we recently launched the Platforms Starter Kit that's a comprehensive template for building multi-tenant applications with built-in custom domains support + ISR.: https://demo.vercel.pub/platforms-starter-kit

Feel free to try it out and let us know what you think! :)

We also removed the 50 custom domain limit for all Pro teams on Vercel.

[eric-burel]

This is my favourite file starting from now: https://github.com/vercel/platforms/blob/main/pages/_middleware.js
It's great to see this issue finally solved, and elegantly!

[Rodimusbot]

It seems URL changed to https://github.com/vercel/platforms/blob/main/middleware.ts

[umashankar-pardhi-amla]

@steven-tey : Are there any repositories available for checking multi-tenancy using the app directory?

[zloegucci]

Yeah, thats so great, specially, when Vercel started blocking pro teams from Russia, Belarus and other "unwanted" countries. Who knows, when your country or organisation will be blocked...
And that is the topic you end up, when trying to figure out, how to build multitenant app with NextJs.

If anyone interested, there is another way of doing this:

in /pages:
-adminFolder
--[anyAdminRoutes] - build admin panel with SSR (CSR) to control your items/products/whatever
[...slug].tsx - catch all routes with getStaticProps

and in next config do rewrites, so you can get host in getStaticProps

async rewrites() { return [ { source: '/admin/:path*', destination: '/admin/:path*', }, { has: [ { type: 'host', value: '(?<host>.*)', }, ], source: '/', destination: '/:host', }, { has: [ { type: 'host', value: '(?<host>.*)', }, ], source: '/:path*', destination: '/:host/:path*', }, ]; },

The problem is you need to pass host name almost in each request you make. I cant figure out, how to pass host name once from somewhere to all requests even to staticProps in build time. If someone knows the answer, please tell

[Rodimusbot]

Can someone knowledgeable help please - I have a nextjs app with multi tenancy.
Using middleware.ts the way it's in the example https://github.com/vercel/platforms/blob/main/middleware.ts - last 3 lines.
To get data and generate pages I use getStaticProps and getStaticPath.

Problem: on inner pages (2-nd, 3-rd level etc) from time to time queries from the main page (1st level) are fired.
If I put a console.log to the main page - it's clearly seen that it's fired which means even if I'm on the nth-level page index.tsx is still being loaded.
Folder structure is "rootFolder/pages/_sites/[tenant]/
index.tsx
[category] -> index.tsx, [article].tsx

I use apollo with cache and main page has a few queries which I fetch in getStaticProps.
Besides I use OIDC as auth provider. Wrong behaviour usually happens when user is unauthenticated. It seems app tries to check if there is a refresh token and if to login user or not.

Any ideas, thoughts, suggestions please?