本地化策略：多语种实现与全球化

问题一:路由匹配冲突

问题描述:Next.js 的 [locale] 动态路由会误匹配中文路径。例如， /seo/learn-seo 可能被误判为 locale 参数，导致中文页面返回 404。

解决方案:在 app/[locale]/layout.tsx 中使用 generateStaticParams() 明确指定支持的 locale:

export function generateStaticParams() {
  return [{ locale: 'en' }]; // 只生成英文路由
}

同时，在 layout 中严格验证 locale 参数:

if (locale !== 'en') {
  return null; // 返回 null 让 Next.js 尝试匹配其他路由
}

问题二:自动语言重定向

问题描述:next-intl 默认会根据浏览器语言自动重定向，导致访问根路径时出现意外的语言跳转。

解决方案:在 i18n/routing.ts 中禁用自动语言检测:

export const routing = defineRouting({
  locales: ['zh', 'en'],
  defaultLocale: 'en',
  localePrefix: {
    mode: 'as-needed', // 默认语言不使用前缀
    prefixes: {
      zh: '/zh',   // 中文：/zh 前缀
      en: ''       // 英文：根路径
    }
  },
  localeDetection: false, // 禁用自动语言检测
});

问题三:Middleware 路由处理

问题描述:需要确保英文路径（如 /seo/learn-seo ）不被 [locale] 路由处理，而是匹配根路径的 app/layout.tsx。

解决方案:自定义 middleware.ts ，只对 /zh 开头的路径应用 locale 处理:

export default function middleware(request: NextRequest) {
  const pathname = request.nextUrl.pathname;
  
  // 只有 /zh 开头的路径才使用 next-intl 中间件处理
  if (pathname.startsWith('/zh')) {
    return createMiddleware(routing)(request);
  }
  
  // 其他路径（英文路径）直接通过，不进行 locale 处理
  return NextResponse.next();
}

问题四:语言切换按钮导致的 URL 重复

问题描述:语言切换组件可能导致 URL 重复，如 /zh/zh/zh/seo/learn-seo 。

解决方案:移除自动语言切换按钮，改为手动 URL 切换。确保所有导航链接正确使用 getLocalizedHref() 函数:

const getLocalizedHref = (href: string) => {
  if (locale === 'zh') {
    if (href === '/') return '/zh';
    return \`/zh\${href}\`;
  }
  return href; // 英文保持原样（根路径）
};

最佳实践总结

1. 明确路由策略:使用 generateStaticParams() 明确指定支持的 locale，避免路径误匹配
2. 禁用自动检测:设置 localeDetection: false，防止意外的语言重定向
3. 自定义 Middleware:只对需要 locale 处理的路径（如 /zh）应用中间件
4. 手动语言切换:通过 URL 路径切换语言，而不是使用自动切换组件
5. Hreflang 标签:为所有多语种页面添加 hreflang 标签，帮助搜索引擎理解语言版本关系

语言切换按钮的 SEO 注意事项:如果网站添加了语言切换按钮（如“中文“、“English"），需要注意 SEO 问题。语言切换按钮如果使用 <button> 标签而不是 <a> 标签，搜索引擎无法将其识别为链接，也就无法发现和索引不同语言版本的页面。如果使用下拉菜单，需要确保所有语言选项链接都在初始 HTML 中存在。更多关于导航菜单和语言切换按钮的 SEO 问题，可以参考 导航菜单和链接 SEO 指南。

这些技术问题的解决确保了多语种网站的稳定性和 SEO 友好性。更多关于 Hreflang 标签的实现，可以参考 Google 官方文档 和 多区域网站管理指南。