如何在next-intl中实现仅基于子域名的国际化路由？

修正后的middleware.ts配置 #

首先调整中间件配置，修复localePrefix与路由匹配规则的冲突：

import createMiddleware from 'next-intl/middleware';

export default createMiddleware({
  locales: ['en', 'de'],
  defaultLocale: 'en',
  localePrefix: 'never', // 完全禁用路径中的locale前缀
  domains: [
    {
      domain: 'en.localhost:3001',
      defaultLocale: 'en',
      locales: ['en']
    },
    {
      domain: 'de.localhost:3001',
      defaultLocale: 'de',
      locales: ['de'] // 明确子域名对应的locale范围
    }
  ]
});

export const config = {
  // 匹配所有非静态资源/API的路径，不再包含带locale的路径规则
  matcher: ['/((?!api|_next/static|_next/image|favicon.ico).*)']
};

调整页面跳转逻辑 #

确保所有内部跳转使用next-intl提供的路由工具，避免生成带路径locale的URL：

• 使用Link组件跳转：

  import { Link } from 'next-intl/client';
  
  // 自动生成对应子域名的无前缀URL
  <Link href="/about" locale="de">访问德语版关于页</Link>
  

• 编程式跳转：

  import { useRouter } from 'next-intl/client';
  
  const router = useRouter();
  // 跳转到德语子域名首页
  router.push('/', { locale: 'de' });
  

本地环境验证 #

确保系统hosts文件已添加子域名映射：

127.0.0.1 en.localhost
127.0.0.1 de.localhost

问题原因说明 #

之前配置失效的核心原因：

1. 原matcher规则包含带locale的路径，与localePrefix: 'never'的配置逻辑冲突，导致中间件无法正确处理子域名路由；
2. 若使用原生Next.js路由工具跳转，会默认生成带路径locale的URL，而非基于子域名的跳转链接。

内容的提问来源于stack exchange，提问作者Siam Ahnaf