Next.js Discord

Discord Forum

Subdomain routing with middleware to different apps

Answered
Singapura posted this in #help-forum
Open in Discord
SingapuraOP
In our current app, we have auth domain that we handles register login pages. auth.mydomain.com and tenantXX.mydomain.com I wrote the following middleware:

export default async function middleware(req: NextRequest) {
  const url = req.nextUrl;

  const host = req.headers.get("Host") || "";
  const domain = host.split(".")[0];

  const searchParams = req.nextUrl.searchParams.toString();
  const path = `${url.pathname}${searchParams.length > 0 ? `?${searchParams}` : ""}`;

  console.log(host, domain, path, searchParams);

  const a = new URL(`/${domain}${path}`, req.url);
  console.log(a.toString());
  return NextResponse.rewrite(a);
}


And my layout is:

app/
  [domain]/
    dashboard/
      page.tsx
    page.tsx
  auth/
    page.tsx
layout.tsx
middleware.ts


When I visit

http://auth.mydomain:3000/ -> Goes to Auth - OK
http://tenant1.mydomain:3000/ -> Goes to domain/page.tsx, OK
http://tenant1.mydomain:3000/dashboard -> domain/dashboard/page.tsx OK

But

http://auth.mydomain:3000/dashboard also goes to domain/dashboard/page.tsx. What am I doing wrong that it makes it match auth path as well?
Answered by Singapura
Oh, I see my mistake. It's related to app routing. It matches the slug one because the specific one does not exist behind the auth folder. I changed it to:

app/
  app/
    [domain]/page.tsx
  auth/page.tsx


And my middleware to:

export default async function middleware(req: NextRequest) {
  const url = req.nextUrl;

  const host = req.headers.get("Host") || "";
  const domain = host.split(".")[0];

  const searchParams = req.nextUrl.searchParams.toString();
  const path = `${url.pathname}${searchParams.length > 0 ? `?${searchParams}` : ""}`;

  console.log(host, domain, path, searchParams);

  let a: URL;
  if (domain === "auth") {
    a = new URL(`/auth${path}`, req.url);
  } else {
    a = new URL(`/app/${domain}${path}`, req.url);
  }
  console.log(a.toString());
  return NextResponse.rewrite(a);
}
View full answer

1 Reply

SingapuraOP
Oh, I see my mistake. It's related to app routing. It matches the slug one because the specific one does not exist behind the auth folder. I changed it to:

app/
  app/
    [domain]/page.tsx
  auth/page.tsx


And my middleware to:

export default async function middleware(req: NextRequest) {
  const url = req.nextUrl;

  const host = req.headers.get("Host") || "";
  const domain = host.split(".")[0];

  const searchParams = req.nextUrl.searchParams.toString();
  const path = `${url.pathname}${searchParams.length > 0 ? `?${searchParams}` : ""}`;

  console.log(host, domain, path, searchParams);

  let a: URL;
  if (domain === "auth") {
    a = new URL(`/auth${path}`, req.url);
  } else {
    a = new URL(`/app/${domain}${path}`, req.url);
  }
  console.log(a.toString());
  return NextResponse.rewrite(a);
}
Answer