如何基于域名实现NextJS v13的URL路由翻译？

核心思路 #

针对数千个产品页面的多域名URL翻译需求，不能靠硬写rewrites规则，要采用动态路由+域名匹配+路由别名映射表的组合方案，实现批量、域名关联的路由映射。

具体实现步骤 #

1. 配置多域名项目支持 #

先确保Next.js项目完成多域名绑定：在next.config.js中通过domains字段配置允许的域名（如果用Vercel部署，也可直接在平台后台添加域名），保证所有目标域名都能指向当前项目。

2. 建立路由别名映射表 #

创建route-translations.js文件，按域名维度维护URL别名与实际路由的对应关系：

export const routeTranslations = {
  "abcd.com": {
    "bathroom": "/bathroom",
    // 批量添加其他英文路由映射
  },
  "abcd.de": {
    "bad": "/bathroom",
    // 批量添加其他德文路由映射
  },
  "abcd.fr": {
    "salle-de-bains": "/bathroom",
    // 批量添加其他法文路由映射
  }
};

如果是产品页面，可将映射表存储到数据库或JSON文件中，方便批量导入、维护。

3. 用中间件实现动态路由映射 #

Next.js v13的App Router支持中间件（middleware.ts），在这里拦截请求，根据当前域名和路径匹配映射规则，重写到实际路由：

import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
import { routeTranslations } from './route-translations';

export function middleware(request: NextRequest) {
  const domain = (request.headers.get('host') || '').toLowerCase();
  const pathname = request.nextUrl.pathname.slice(1); // 去除路径开头的斜杠

  // 匹配当前域名对应的路由映射
  const domainMap = routeTranslations[domain];
  if (domainMap && domainMap[pathname]) {
    const targetPath = domainMap[pathname];
    // 构建目标URL，保留原请求的查询参数
    const targetUrl = new URL(targetPath, request.url);
    targetUrl.search = request.nextUrl.search;
    return NextResponse.rewrite(targetUrl);
  }

  // 无匹配规则时，正常放行请求
  return NextResponse.next();
}

// 配置拦截所有路径
export const config = {
  matcher: ['/:path*'],
};

4. 反向生成本地化URL #

在页面组件中需要生成对应域名的本地化链接时，可编写工具函数实现反向查找：

import { routeTranslations } from './route-translations';

export function getLocalizedUrl(domain: string, actualRoute: string) {
  const domainMap = routeTranslations[domain];
  if (!domainMap) return actualRoute;
  
  // 从映射表中反向查找对应的URL别名
  const alias = Object.keys(domainMap).find(key => domainMap[key] === actualRoute);
  return alias ? `https://${domain}/${alias}` : actualRoute;
}

调用示例：getLocalizedUrl('abcd.de', '/bathroom')会返回https://abcd.de/bad。

注意事项 #

• 映射表建议从CMS或数据库动态拉取，避免手动维护数千条数据的繁琐。
• 中间件中处理域名时统一转成小写，避免因域名大小写导致匹配失败。
• 若采用静态生成（SSG），需在generateStaticParams中结合域名生成对应本地化路径，确保静态资源正确生成。

内容的提问来源于stack exchange，提问作者Mohammed Ismail