🔧 Help - Subdomain Routing on NextJS - Multi tenant

How do I isolate the subdomains and the main domain - for CMS setup
What's the best way to achieve this?

First-

• I want localhost:3000 to be completely free
• The landing page and all of its paths(pages) to be accessibe only at app.localhost:300
• app.localhost:3000/login for login which redirects to the dashboard.localhost:3000
• User dashboard at dashboard.localhost:3000
• Admin dashboard at admin.localhost:3000 Each subdomain completely separated.

I have multiple subdomains, each subdomain is a separate website
how do I ensure that paths don't leak and the SEO is not affected either.

How do the big guys do it?

Like - Subdomain1.app.com/home and subsdomain2.app.com/home don't mix up, and they are completely isolated

I want to to the same with admin.app.com and app.app.com subdomains to contain respective dashboards.

I have tried tweaking middleware and rewrites but somehow, either all the subdomain paths are accessible on the main site, or I get 404

○ Compiling /middleware ...
 ✓ Compiled /middleware in 1290ms (197 modules)
{
  pathname: '/login',
  hostname: 'app.localhost',
  path: '/login',
  baseUrl: 'http://localhost:3000/login',
  nextUrl: 'http://localhost:3000/login'
}
Rewriting auth path to: /app/(auth)/login
(node:39596) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
 ○ Compiling /_not-found ...
 ✓ Compiled /_not-found in 7.2s (611 modules)
 GET /login 404 in 7989ms

What's the best way to build a multi-tenant app with next js?