Next.js多语言应用如何生成带当前路径的alternates语言元数据？

静态配置alternates.languages时写死的路径不会自动关联当前页面路由，要实现每个语言链接自动带上当前路径，得用动态生成metadata的方式，步骤如下：

替换静态metadata为generateMetadata函数 #

在全局layout（或对应页面）里用generateMetadata替代静态的metadata对象，这样能动态获取当前请求的路由信息：

import { Metadata } from 'next';

export async function generateMetadata({ request }: { request: Request }): Promise<Metadata> {
  const metadataBase = new URL(process.env.NEXT_PUBLIC_APP_BASE_URL!);
  const currentUrl = new URL(request.url);
  // 提取去掉语言前缀后的基础路径（兼容默认语言和带前缀的语言页面）
  const basePath = currentUrl.pathname.replace(/^\/(en|fr)/, '') || '/';

  return {
    metadataBase,
    alternates: {
      canonical: './',
      languages: {
        'en': `/en${basePath}`,
        'fr': `/fr${basePath}`,
        'x-default': basePath, // 可选：指定默认语言的x-default链接
      },
    },
  };
}

代码说明 #

1. 动态获取当前路径：通过request.url解析出当前页面的路径，不管是默认语言的/salaries还是英文的/en/salaries都能处理
2. 剥离语言前缀：用正则/^\/(en|fr)/去掉路径开头的语言前缀，得到统一的基础路由（比如/salaries）
3. 拼接语言链接：给每个语言代码加上前缀，再拼接基础路径，生成带当前路由的多语言alternate链接

效果验证 #

• 访问默认语言页面https://acme.com/salaries时，生成的alternates链接为：
  • en: https://acme.com/en/salaries
  • fr: https://acme.com/fr/salaries
• 访问英文页面https://acme.com/en/salaries时，生成的alternates链接会自动对应到其他语言的同路由页面

注意事项 #

• 如果有更多语言，比如德语de，需要更新正则为/^\/(en|fr|de)/
• 确保环境变量NEXT_PUBLIC_APP_BASE_URL已正确配置为站点根域名（如https://acme.com）
• 若使用静态生成（SSG），需在generateStaticParams中预生成所有语言与路由的组合，保证静态页面的metadata正确生成

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