Internationalization (i18n) and subdomains

[brn1m]

Summary

I can't get them both to work at the same time (just to be clear, I'm not trying to implement something like "en.domain.com", I'm trying to get "app.domain.com/en" to work with i18n). I can easily make a subdomain work with middleware:

import { NextResponse, NextRequest } from 'next/server';

export default function middleware(request: NextRequest) {
  const hostname = request.headers
    .get("host")!
    .replace(".localhost:3000", `.${process.env.NEXT_PUBLIC_ROOT_DOMAIN}`);

  if (hostname === 'app.domain.com') {
    const url = request.nextUrl.clone();
    
    url.pathname = `/app/${url.pathname}`;
        
    return NextResponse.rewrite(url);
  }

  return NextResponse.next();
}

export const config = {
  matcher: ['/((?!api|_next|_vercel|.*\\..*).*)', '/app/:path*'],
};

And I can easily use internationalization (i18n) routing on my main domain.
But the moment I try to use both, the main domain works great but the subdomain always serves a 404 and a "Unable to find next-intl locale because the middleware didn't run on this request. See https://next-intl-docs.vercel.app/docs/routing/middleware#unable-to-find-locale. The notFound() function will be called as a result."
No matter what, I've tried every path possible.

import { NextResponse, NextRequest } from 'next/server';
import createMiddleware from 'next-intl/middleware';

export default async function middleware(request: NextRequest) {
  const hostname = request.headers
    .get("host")!
    .replace(".localhost:3000", `.${process.env.NEXT_PUBLIC_ROOT_DOMAIN}`);

  const intlMiddleware = createMiddleware({
    locales: ['en', 'es', 'fr'],
    defaultLocale: 'en'
  });

  const response = intlMiddleware(request);

  if (hostname === 'app.domain.com') {
    const url = request.nextUrl.clone();
    const locale = response.headers.get('x-middleware-request-nextlocale') || 'en';
    url.pathname = `/app/${locale}${url.pathname}`;
    return NextResponse.rewrite(url);
  }

  return response;
}

export const config = {
  matcher: ['/((?!api|_next|_vercel|.*\\..*).*)'],
};

The log shows the correct path but a 404. It's like I can't have both.

Are there better ways to do this? Am I missing something? Has anyone tried this successfully? I'm probably doing something really dumb here but I'm just starting out with next.js, so please don't kill me. I'd just like to know how I could have i18n internationalization in subdomains in next.js 14. Thanks.

Additional information

No response

Example

No response

[colonel14]

You got any answer on this?

[AutoScrape123TX]

So this is what you need : https://next-intl.dev/docs/routing#locale-cookie

import { NextRequest, NextResponse } from 'next/server';
import createMiddleware from 'next-intl/middleware';
import {routing} from '@/i18n/routing';

export function middleware(request: NextRequest) {
  const hostname = request.headers.get('host') || '';
  const locale = request.cookies.get('NEXT_LOCALE')?.value || 'en';

  // Subdomain handling for app.mydom.com
  if (hostname.startsWith('app.')) {
    const url = request.nextUrl.clone();

    // Rewrite the path to /app for the app subdomain
    if(locale == "en"){
      request.nextUrl.pathname = `/app${url.pathname}`;
    } else {
      request.nextUrl.pathname = `/${locale}/app${url.pathname}`;
    }
  }

  const handleI18nRouting = createMiddleware(routing)
  const response = handleI18nRouting(request);
  return response;
}

folder structure for me is
app
[locale]
app

export const routing = defineRouting({
  defaultLocale: localization.defaultLocale,
  localePrefix: 'as-needed',
  localeCookie: {
    path: "/",
    domain: `.${target_domain}`,
    maxAge: 60 * 60 * 24 * 4,
    sameSite: "lax",
    secure: false
  },