Localization with a multitenant app using next-intl with i18n routing

[shreyailango-waj]

Hi everyone! I'm using next-intl with i18n routing to localize my application which provides our clients with websites of their own. They all have different subdomains, hence the multitenant application. I was able to run everything locally, the local environment has a url like {subdomain}.localhost:3000/{locale}?branch={id}. the second we deployed it to staging on Vercel where the url is like {subdomain}.app.dev, I run into 500 internal server error or 404 issues with {subdomain}.app.dev/en. The branch id does not get added to the url and I think it's an issue with my middleware.ts but unable to pinpoint the exact issue since everything works locally. I've attached a picture of what my project directory looks like and my middleware.ts. I followed this tutorial - https://next-intl.dev/docs/getting-started/app-router/with-i18n-routing. Been reading several posts here and now I'm not sure whether I should remove the subdomain directory and just keep [locale].

import { NextRequest, NextResponse } from 'next/server';
import getBusiness from '@/services/business/get_business_service';
import { updateSession } from '@/utils/supabase/middleware';
import createMiddleware from 'next-intl/middleware';
import { routing } from './i18n/routing';


// Create the next-intl middleware
const intlMiddleware = createMiddleware(routing);

const locales = ['en', 'ar', 'tr'];

export const config = {
  matcher: [
    '/((?!api/|_next/|_static/|_vercel|favicon.ico|[\\w-]+\\.\\w+).*|sitemap\\.xml|robots\\.txt)',
    '/',
    '/(ar|en|tr)/:path*',
  ],
};

export default async function middleware(req: NextRequest) {
  try {
    const url = req.nextUrl;
    let hostname = req.headers.get('host') || '';

    // Extract the subdomain
    const parts = hostname.split('.');
    const subdomain = parts[0];

    // Handle Vercel preview URLs
    if (
      hostname.includes('---') &&
      hostname.endsWith(`.${process.env.NEXT_PUBLIC_VERCEL_DEPLOYMENT_SUFFIX}`)
    ) {
      hostname = `${hostname.split('---')[0]}.${process.env.ROOT_DOMAIN}`;
    }

    // Handle special cases first
    if (subdomain === 'login') {
      return NextResponse.redirect(new URL('https://login.waj.ai'));
    }

    if (hostname === 'localhost:3000' || hostname === process.env.ROOT_DOMAIN) {
      return NextResponse.redirect(new URL('https://waj.ai'));
    }

    if (subdomain === 'customers') {
      return await updateSession(req);
    }

    // Handle custom domains
    if (hostname.endsWith(process.env.ROOT_DOMAIN)) {
      const business = await getBusiness(subdomain);
      if (business?.customDomain) {
        const newUrl = new URL(
          `https://${business.customDomain}${url.pathname}${url.search}`
        );
        return NextResponse.redirect(newUrl);
      }
    }

    // Check if the path already has a valid locale
    const pathParts = url.pathname.split('/').filter(Boolean);
    const hasValidLocale =
      pathParts.length > 0 && locales.includes(pathParts[0]);

    // Handle locale redirect if needed
    if (!hasValidLocale) {
      const newUrl = new URL(req.url);
      newUrl.pathname = `/${locales[0]}${
        url.pathname === '/' ? '' : url.pathname
      }`;
      return NextResponse.redirect(newUrl);
    }

    // Process with next-intl middleware
    // But don't return it directly - we'll use it to get the processed URL
    const intlResponse = intlMiddleware(req);

    // Get the path that next-intl decided on
    const rewritePath = intlResponse.headers.get('x-middleware-rewrite');
    let finalPath;

    if (rewritePath) {
      // Extract just the pathname and search from the rewrite
      const rewriteUrl = new URL(rewritePath);
      finalPath = `/${subdomain}${rewriteUrl.pathname}${url.search}`;
    } else {
      // If no rewrite path, use the current path with subdomain
      finalPath = `/${subdomain}${url.pathname}${url.search}`;
    }

    // Now rewrite to include both locale (handled by next-intl) and subdomain
    return NextResponse.rewrite(new URL(finalPath, req.url));
  } catch (error) {
    console.error('Middleware error:', error);
    return NextResponse.next();
  }
}