Looking for multi tenant app example (Next, Pages Router, multi domains)
Unanswered
Mattèo posted this in #help-forum
MattèoOP
Hey ! I am working on a multi tenant app with Next.js and I'm using Pages Router, And I'd like to know if anyone has succeeded with the pages router since there is only a examples (vercel/platforms) for app router? If so, does anyone have a repo like vercel/platforms but for the router pages?
Wishing you all a good day
Wishing you all a good day
2 Replies
@Mattèo Hey ! I am working on a multi tenant app with Next.js and I'm using Pages Router, And I'd like to know if anyone has succeeded with the pages router since there is only a examples (vercel/platforms) for app router? If so, does anyone have a repo like vercel/platforms but for the router pages?
Wishing you all a good day
Jagdterrier
Hey, did you find something? I also need to implement this without any vercel products since I am not using it, but cant find and realize how to do it..
MattèoOP
Hey 👋, yes I managed to make work a tricky solution to handle multiple domain app / multi tenant on a single Next.js app running in a docker container.
The way it works is by playing with the middleware.ts file.... And that was a huge pain, the fact that middleware request runs in a edge runtime before the Next.js Layer is complicating a lot of things (auth, guard, db queries for domain mapping). But it's seems to be the only way to solve our issue. I tried to use a Hono web framework with Next.js middleware but this was not concluent due to non standard Next.js web APIs (NextResponse mainly)
So my middleware.ts file is a big nightmare, a sneak peek :
1. Handle request and make some constants with it to simplify next step (hostname, path, nextjs url, detect backoffice domain)
2. Based on hostname information query a compatible database storage layer with Edge Runtime, in my case that's a Redis DB wrapped with a [HTTP Proxy](https://github.com/hiett/serverless-redis-http) to query it using HTTP. Now I can match hostname and the Id of the current tenant.
3. Use NextResponse.rewrite to respond to the HTTP request by returning a Next.js path to your tenant scoped pages. (ex : mj-shop.com/my-account ➡️ http://localhost:3000/[tenantId]/my-account, but the second URL here is never shown, that's managed by Next.js rewrite logic)
You can debug rewrite by checkin response headers and looking for X-Middleware-Rewrite one that display the nextUrl you rewrited to.
That's it, maybe I will write a blog post soon about this painful issue. Don't hesitate if you need more help
The way it works is by playing with the middleware.ts file.... And that was a huge pain, the fact that middleware request runs in a edge runtime before the Next.js Layer is complicating a lot of things (auth, guard, db queries for domain mapping). But it's seems to be the only way to solve our issue. I tried to use a Hono web framework with Next.js middleware but this was not concluent due to non standard Next.js web APIs (NextResponse mainly)
So my middleware.ts file is a big nightmare, a sneak peek :
1. Handle request and make some constants with it to simplify next step (hostname, path, nextjs url, detect backoffice domain)
2. Based on hostname information query a compatible database storage layer with Edge Runtime, in my case that's a Redis DB wrapped with a [HTTP Proxy](https://github.com/hiett/serverless-redis-http) to query it using HTTP. Now I can match hostname and the Id of the current tenant.
3. Use NextResponse.rewrite to respond to the HTTP request by returning a Next.js path to your tenant scoped pages. (ex : mj-shop.com/my-account ➡️ http://localhost:3000/[tenantId]/my-account, but the second URL here is never shown, that's managed by Next.js rewrite logic)
You can debug rewrite by checkin response headers and looking for X-Middleware-Rewrite one that display the nextUrl you rewrited to.
That's it, maybe I will write a blog post soon about this painful issue. Don't hesitate if you need more help