DEV Community

Cover image for Step by step: Multi-Tenant App with Next.js

Step by step: Multi-Tenant App with Next.js

iskurbanov on March 01, 2023

Next.js now allows you to easily create a multi-tenant application using subdomains. This enables you to create web apps like Linktree, Super.so, a...
Read full post
Collapse
 
jetroolowole profile image
Jetro Olowole •

My challenge is to host this with AWS rather than Vercel

Collapse
 
amal_shyjo_edc240e5918113 profile image
Amal Shyjo •

Hi @iskurbanov
I’m following your guide on implementing a multi-tenant architecture for one of our existing products. However, we have a situation where our client already has separate hosting for domain.com and app.domain.com. Could you let me know if using wildcard subdomains might interfere with these existing domains?
Thanks!

Collapse
 
abdmun8 profile image
Abdul Munim •

Thanks, @iskurbanov , this post helps me a lot.
I have a multi-tenancy SSG app, how can I add i18n? Can you give me some advice?

Collapse
 
barhouum7 profile image
IboTech •

Same question here, I've also implemented a multi-tenant app with i18n next-intl and it works but I still facing some conflict problems in the app structure, cuz I need to set up localization for the dashboard and landing page only without affecting the dynamic route like [domain]

Collapse
 
tejasgk profile image
Tejas •

couple of questions

  • is the approach same for Next 13 App dir too
  • what if I only want to test it locally
Collapse
 
br4mber profile image
Amin • • Edited

I've implemented analagous logic with the App dir and it's working perfectly well! If fact your file structure in the App dir will look exactly the same, just create the "site" logic in a page.tsx file instead of index.tsx.

Image description

I also added the following to route both my domain and localhost to another folder such that I could work with that instead of the root domain defualting to the DEFAULT_HOST like in this tutorial. Helped with running locally and debugging!

// rewrite root application to `/home` folder
  if (
    hostname === "localhost:3000" ||
    hostname === process.env.NEXT_PUBLIC_ROOT_DOMAIN
  ) {
    return NextResponse.rewrite(
      new URL(`/home${path === "/" ? "" : path}`, req.url),
    );
  }
Enter fullscreen mode Exit fullscreen mode
Collapse
 
pierreatwork profile image
Pierre •

Great article !
Do you have any idea on how to set up environnement variable for each sub-site ?
Thanks !

Collapse
 
konami99 profile image
Richard Chou •

Will adding a prefix help?
For example key is domain:key

Collapse
 
nklido profile image
Nikos Klido •

Would it be possible for customers to bring their own custom domain instead of the wildcard ?

Collapse
 
iskurbanov profile image
iskurbanov •

Yes of course, checkout the Next.js platform starter kit for example of using custom domains: vercel.com/templates/next.js/platf...

Collapse
 
ditabdul profile image
Jojo •

This is cool. Can u explain how can i using multitenancy and pathname both?
e.g.: user1.hosted-url.com/about

Thanks before

Collapse
 
br4mber profile image
Amin •

Same logic :)

Add the following logic for user1.hosted-url.com/about

if (url.pathname.startsWith('/about')) {
    url.pathname = `/sites/${data?.subdomain}${url.pathname}`
Enter fullscreen mode Exit fullscreen mode