Next.js 国际化：生成Metadata时无法为不同语言设置独立标题

在Next.js App Router中，静态metadata对象无法获取路由参数，所以要改用动态生成metadata的generateMetadata函数，它能直接拿到路由里的lang参数，实现多语言标题适配。

直接替换你原来的静态metadata代码，改成下面的写法：

import type { Metadata, ResolvingMetadata } from 'next';

// 定义路由参数类型
type PageProps = {
  params: { lang: string };
};

export async function generateMetadata(
  { params }: PageProps,
  parent: ResolvingMetadata
): Promise<Metadata> {
  // 维护各语言对应的标题，按需扩展
  const titleMap = {
    'zh': '发展里程',
    'zh-TW': '發展里程',
    'en': 'Milestones',
    'ko': '마일스톤'
  };

  // 匹配当前语言的标题，默认用英文兜底
  const currentTitle = titleMap[params.lang as keyof typeof titleMap] || 'Milestones';

  return {
    title: currentTitle
  };
}

关键说明 #

• generateMetadata是App Router原生支持的动态metadata生成方法，支持异步操作，能直接访问params（路由参数）和searchParams（URL查询参数）
• 用titleMap集中管理多语言标题，后续加新语言直接在对象里加键值对就行，维护起来方便
• 加了默认值处理，避免遇到未定义的语言时标题为空

如果需要和布局里的全局标题前缀合并（比如网站名），可以利用parent参数获取父级metadata，再拼接：

// 获取父级layout的title
const parentMetadata = await parent;
const siteName = parentMetadata.title || 'My Site';

return {
  title: `${currentTitle} | ${siteName}`
};

内容的提问来源于stack exchange，提问作者MERN Stack Developer