Multi tenancy best practices

[eric-burel]

Hi,

Writing multi-tenancy application can require some thoughts. I open this discussion so we can discuss the best practices.

I am currently implementing multi-tenancy with the following constraints:

• there is only one underlying Next application. Specifically I use only one domain.
• each tenant is associated with a specific configuration file, which can alter the application rendering (colors, structure of some contents, layout...)
• each tenant has access only to its own data
• user roles are tenant specific

I don't use server-side rendering, but I'd like to keep enjoying static site generation to render an application shell, like Vercel's dashboard is doing. Concrete example: you open "myapp.com/data", it renders a pages skeleton, it triggers a query to get the currentUser, it fills the page when we get the current user.

I am not sure this pattern will scale to multi-tenancy, but that's where I start.

This discussion is a bit beyond the scope of Next btw, I have a similar task to get done for a Meteor application.

Is anyone implementing something similar right now? Are there learnings to share?

Relevant resources

• @leerob Live demo with code of multiple domains and domain switch https://multi-domain-first.vercel.app/
• Multitenancy and incremental static generation: Multi Tenancy App and Incremental Static Generation #17260
• Next Right Now take on multitenancy: https://unlyed.github.io/next-right-now/concepts/tenancy.html
• A multi-tenant plugin for Blitz (with Prisma) https://www.npmjs.com/package/@prisma-multi-tenant/blitz
• Related to the broader questions of rendering multiple versions of an app: Incremental Static Generation for multiple rendering paths #17631
• Update: I've since written an article to describe an architecture for statically rendering personnalizaed/private content: https://blog.vulcanjs.org/lets-bring-the-jamstack-to-saas-introducing-rainbow-rendering-ad1834fe62ff
• Update: article from @imshubhamsingh that describe a real-life multi-tenant architecture with Next in details https://blog.smallcase.com/scaling-microsite-with-next-js/

Open questions

• How do you handle tenant specific configuration? You'd want to load it as soon as possible, on app startup or tenant change (for user that belongs to multiple tenants)
• In the context of Next, the question is also: how to handle SSG when some configuration is tenant specific ? For example, say that the top menu background color changes for each tenant. Do you prerender with a default color, without any color, how do you avoid flashes, etc.?

[tomevans18]

I feel @leerob approach does work well. It allows full control but does feel like more could be done to make this a better setup.

It would be really nice to see something like the internationalisation setup where it can be configured and done at build time with incremental updates in live.

The biggest thing missing for me now is static generation of variations of the same page.

e.g. /about could have 4 different versions dependant on the brand

[leerob]

Mine's a fairly basic example – would love to see it evolve into something more complex as you suggested!

[tomevans18]

@leerob do you know if there is any desire to provide an option to make tenanted application more advanced, offering multiple page design output?

I can think of a few situations where we would want to statically render variations of the same page:

• when there are multiple brands/tenants - something like a SAAS offering where it is themed per brand (this is our setup and we need to use getServerSideProps to simply retrieve the query to switch the theme, which doesn't feel the right option - this is how your example works)
• language specific design - for Spanish users you may want a different design for the home page compared to the UK, having a language if/else works but doesn't seem like a clean solution
• role based variations - some news sites offer previews to articles but only the full article to the logged in user

[tomevans18]

All of these bullet points are achievable but only with getServerSideProps, which is a real shame as it removes all the SSR benefits

[eric-burel]

I've turned that into an article, the architecture I present would allow (in theory!) a static multi-tenancy, as well as other use cases, and also better server-side redirections : https://blog.vulcanjs.org/lets-bring-the-jamstack-to-saas-introducing-rainbow-rendering-ad1834fe62ff

[steven-tey]

@tomevans18 @eric-burel I just posted an example for building multitenant apps with ISR & edge functions in my comment below, hope it helps! :)

[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.

---

We are working on providing a high-quality solution for multi-tenant applications, similar to Next.js Commerce for e-commerce 😄 🔜

[CharlieWhite]

Hi @leerob, any update on a native multi-tenant solution?

[steven-tey]

@Fellds @maapteh @CharlieWhite I just posted an example for building multitenant apps with ISR & edge functions in my comment below, hope it helps! :)

[Uny1me]

Has anyone actually tested things with the multitenant application? I need to know how to do it?

[fiqryq]

Hey @leerob , I'm curious - is it possible to self-host this platform template on my own server?

[leerob]

Yeah, I'd recommend reading our self hosting docs + using our Dockerfile example.

https://nextjs.org/docs/app/building-your-application/deploying#self-hosting

How you handle subdomains will be infrastructure specific, however.

[imshubhamsingh]

@eric-burel this discussion inspired me to solve one of the use-case that I faced during the work. Thanks to @leerob approach, I was able to run more than 100+ static website using this approach using single next.js server. Here is a case-study for the same. https://blog.smallcase.com/scaling-microsite-with-next-js/.

[PsyGik]

The article was insightful. Thank you for sharing!

[steven-tey]

@imshubhamsingh @PsyGik Just a quick FYI, I just posted an example for building multitenant apps with ISR & edge functions in my comment below, hope it helps! :)

[yroc92]

I ran into this problem myself and ended up building spinoff project to solve it called AppMasker. I’m happy to talk through it with anyone who’s struggling with multi-tenancy / whitelabeling / custom domains.

[eric-burel]

In which way is that related to Next?

[yroc92]

As a dev using Next I ran into the problem. So I suppose you could say "Next brought me here". But otherwise no direct relation.

[Uny1me]

I WOULD LIKE TO TAKE YOU UP ON THAT OFFER PLEASE

[eric-burel]

Hi guys, since the introduction of middlewares, it's waaay easier to setup multi-tenancy based on cookies, without having to alter the URL. You can also combine this with other related problematics, like the ability to customize the application per user (theming, AB testing), i18n redirections (advanced usages where you handle the redirections manually), handling paid content...

I've wrote an article about how to cleanly handle the route params and rewrites to get the behavior you want. It includes a link to a code demo : https://blog.vulcanjs.org/render-anything-statically-with-next-js-and-the-megaparam-4039e66ffde

It renders statically, and can fallback to per-request SSR if needed (eg adding a new tenant without having rebuilt the app yet). It can probably work with ISR even though I haven't tested it yet. It doesn't bloat the URL either, thanks to rewrites. You have full control on the setup.

Link to the code: https://github1s.com/VulcanJS/vulcan-next/blob/devel/src/pages/vn/examples/[M]/megaparam-demo.tsx

[AlexGaputin]

Looking into it, thanks

[steven-tey]

This is brilliant @eric-burel! Also, speaking of ISR, I just posted an example for building multitenant apps with ISR & edge functions in my comment below, hope it helps! (cc: @AlexGaputin)

[eric-burel]

Thank you made my day :) That's the power of math 🪄, the neat thing is that it's possible to formally prove that with this strategy you can reach an optimal number of renders for any set of requests, so you get absolutely zero redundant request time server-render or client-render.

[steven-tey]

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.

---

Hey everyone! We recently rolled out a simple example that allows you to create unique content pages with a multi-tenant infrastructure using edge function rewrites and ISR. Each of your users gets assigned a unique subdomain when they create their account, with the (usually paid) option to add a custom domain.

[uncvrd]

Hey @steven-tey if I understand correctly, this solution will not cover authentication of custom domain pages, correct?

For example, in the scenario of the platform app, all _site pages under a custom domain are public facing articles. However, lets say we want to require users to log in before they can view these articles (e.g. they're not vercel.pub domain pages but instead customdomain.com pages).

Am I correct in my assumption that we cannot authenticate these custom domain pages? This gets even more complicated when allowing social login from these custom domains because the redirect url needs to be an authorized redirect url in whatever OAuth provider you're using so it's not like we can route to a signin page on vercel.pub and redirect them back to their custom domain 🤔

[leomeneguzzi]

Hi @steven-tey, I looking for multi-tenant boilerplate e-commerce. Did you do something in this way?

[maurizioriano]

@uncvrd You can either redirect users to your root domain just to login, as hashnode does, or you can include a form for tenants to add their social private keys

[uncvrd]

@maurizioriano redirecting them to the root domain for auth will only authenticate users for the root domain and subsequent subdomains under the root domain, it will not authenticate them for their own custom domains

[Uny1me]

Has anyone able to implement this with a Next Frontend and Node Backend because I really need help, cause I'm on a deadline

[maapteh]

Yes with the middleware you can achieve this. What i did is that i moved the pages structure to a single package, and on every change i distribute these over the tenants pages structure, the tenant only has its own _app and _middleware but for example login api call is then just configuration to our api. Each tenant has still its configuration (api keys etc). And every tenant has its own theme.

[Uny1me]

I'm sorry to trouble you but I don't even know where to start, do you mind if we schedule a meeting, I've gone through the actual documentation and still struggled. Please,

[maapteh]

You can start with the examples right? For example this setup https://github.com/vercel/examples/blob/main/edge-functions/hostname-rewrites/pages/_sites/%5Bsite%5D/index.tsx#L72 explains how you can have multiple sites on same platform. But the really bad thing about it is that the look and feel is same for all (or when its a requirement then thats awesome), and when you still modify them by a prop it means you will build theme A with theme B which is bad from a tenant perspective.

So first try to get your requirements straight.

And google can help you a lot, for example https://www.mikealche.com/software-development/how-to-create-a-multi-tenant-application-with-next-js-and-prisma etc etc etc

[Uny1me]

Thank you very much, I'll get to these resources

[MikeDrenth]

Hi everyone,

I came across this post after doing some google, because i'm looking for a solution on a project i'm working on right now. Let me try to explain a bit on what we are working on right now.

We are rebuilding our CMS that it can serve as API, and we want to use NextJS for our frontend framework to build the website with. Now at this point we have a so-called SaaS website, in the old way with PHP / HTML / CSS / Jqeury. This SaaS project is just one project that has multiple websites in it, that all share the same views with only a bit custom css and their variables to style it to their colors. This way we can manage them all, with just changing one view.

We are now looking for a sulution for this, but then with NextJS. So what we are looking for is a solution to have multiple websites into our NextJS app. Where we would love to have just 'one' website that serve the views for all the website, and some way to change colors based on the website that is being visited.

After some Google, i've seen solution that serve a Multi-tenant App (thins like Krabs.js). The only downside for us right there is that every website will have their own files, which means that if there ever changes something, we need to do this X amount of times for every website.

This is something i've not found yet and really hope that someone here might read this and that knows how to or has an example how to get this working.

What we 'just' need is like a .config file where we can add custom auth info for the website to talk with our API and a way to set custom variable colors. Things like Krab.js really comes close, but it's just missing that little bit that we really need.

Also to reminder, this is the 1st time i work on a react/nextjs app, so it's kinda new for me, but from reading it sounds like that the middleware COULD do this all, i just don't really know how this would be possible.

If anyone reads all this, and knows something, please hit me up.

edit:

To add a bit more, every website has their own unique domain, so it's not on subdomain level, and we will serve them on our own servers, not on Vercel

[MikeDrenth]

So while looking at Vercel Platforms and how it's all done, it looks good. One downside is just see in this, is that every site, has their own views in their directory. I might look into this how big of a issues this really is for us, but would be cool if ther was a way to prevent this from needing.

(think of A/B testing as having 2 tenants A and B).
This sounds logical indeed, so that wouldnt hit the performance that hard then indeed, that's nice.

I've written another article this is probably better suited for starters: https://www.smashingmagazine.com/2022/07/new-pattern-jamstack-segmented-rendering/

I will take a look at this article later, thank you for your time and information, really useful man.

[MikeDrenth]

Hello @eric-burel

Sorry to disturb you, but i am having one issue with the project at this point. After a small break on the project we are working on it again. We are having some issues with generating paths in the getStatisPaths function and i hope you may have a answer or a sulition for the following.

We are trying to build a SaaS project with the previous mentioned project. That means that, we use this repo to build multiple websites on one codebase.

Now the issue i am facing is that, getStaticPaths is trying to get generate all the paths, which is cool and i understand why it should. But the problem i am having is that, i need to make a API call with a required parameter that is the current domain. Then it will give me a list of all the current pages.

The problem is that, i need a way to pass that into my call getSiteInfo(site as string) but at this point i am unable to find the current domain / url inside getStaticPaths, because i don't have access to NextRequest or NextResponse. So the question is, is there any way i can send the required domain/website url into the request inside getStatisPaths?

[eric-burel]

Not sure I get it but:

• why don't you build all domains? So you just call your API to get the list of domains and build all of them
• if that's not possible, you can instead use ISR. You pass the domain in the URL (the URL parameter is a way to pass request information without actually reading the request if you see what I mean => if the URL is "foobardotcom/my-page" the domain is foobardotcom)
  Hope it helps

[MikeDrenth]

Hi Eric,

Thanks for your time. The call i do is not to get all the domains. Let me showcase a bit what i need to do to get all the current pages from the CMS.

1. Generate a access token with user and password
2. Then i need to make a API call to get the current site id, and to get the site id, i need to provide the matching domain name
3. After that i need to make a API call that puts in the matching site id, and then it will give me all the current pages from that website

From how i see this now, i don't think this will fit with getStaticPaths, because there just seems to be no way i could do this. I've been thinking about setting some domains in a .env file, but that didn't really seem to work either.

[nabildroid]

You can use custom domain and Middle ware
Like api.myapp.com will be rewrited to youdomain.com/myapp
In next13
You make this api
app/[siteid]/route.ts

There you can access to cookies, headers...

[ChristianWare]

Can someone please give detailed instructions on how this is done? For instance:

Step 1: Do this
Step 2: Do that
Step 3: Do something else.

This way, we don't have to keep clicking on these links to articles that are either outdated, or written in a vague manner. Please help. You will be doing the community a huge solid.

Thanks,
Frustrated Developer

[iskurbanov]

Wrote a short article here on how to get the basics setup: https://dev.to/iskurbanov/step-by-step-multi-tenant-app-with-nextjs-2mbc

[eric-burel]

@ChristianWare multi-tenancy = I have more than 1 organization using my app. Then the requirements vary wildly between projects, they can concern the database structure, the infrastructure, the application implementation, SEO, security, domain names... You will therefore never see a recipe for multi-tenancy, and it's normal that you find various articles covering various specific aspects. Eg I've worked on multi-tenancy and static rendering: that's only one of those numerous aspects.
Vercel Platform is a good starter that should be kept up to date if you want to see something targeted at Next precisely.

[steven-tey]

Hey @ChristianWare! We updated the Multi-tenant guide recently, along with the Platforms Starter Kit (to use the App Router). Are these two resources helpful?

[nabildroid]

The approche i took is to define a template that groups multiple website

And for the file structure it's like this
app/[siteId]/templates/
Hardcore template names

/T1..
/T2..

Then using the middleware i get the domain name map it to the template name using Redist then rewrite the request to /domainName/templates/templatename

To prevent using Redist multiple time i stores the template name in the cookie and return it back to the client

The problems of this method are
Hardcore templates
Update small thing in specific template will cause the entire cache of all templates to be removed