Next.js多语言路由下getStaticProps为何无法获取正确的slug？

问题描述 #

我在使用getStaticProps()时遇到了无法获取正确slug的问题，当前需要获取页面的翻译版slug（比如about页面）。

getStaticPaths()生成的对象是正确的，所有参数都是从DatoCMS API获取生成的：

[
  { params: { slug: 'about-us' }, locale: 'en' },
  { params: { slug: 'ueber-uns' }, locale: 'de' },
  ...  
]

但当我访问德语页面www.exmaple.com/de/ueber-uns时，getStaticProps返回的context如下：

{
  params: { slug: 'about-us' }, // 这里应该返回`ueber-uns`才对？
  locales: [ 'en', 'de' ],
  locale: 'de', // 这个参数是正确的 
  defaultLocale: 'en'
}

我是参照Next.js官方文档关于i18n路由动态getStaticProps页面的说明来操作的。

解决方案 #

这个是Next.js内置i18n路由搭配动态路由的常见问题，按以下步骤排查修复即可：

• 优先清除本地构建缓存后重启服务，绝大多数情况下是旧的静态构建产物未更新导致的参数映射错误，执行以下命令：
  rm -rf .next && npm run dev
  生产环境构建的话替换为npm run build后再启动服务即可。
• 检查next.config.js中的i18n相关配置，确认没有配置错误的rewrites、redirects规则把德语路径的slug强制重定向/重写到英文slug上。
• 如果你必须直接获取访问路径上的原始slug，可以在getStaticProps中通过请求上下文拆分路径获取，该方法仅在SSR或开启fallback的静态生成场景下可用：

// getStaticProps 内部代码
if (context.req) {
  const pathSegments = context.req.url.split('/')
  const rawSlug = pathSegments.at(-1)
}

• 临时兼容方案：因为context返回的locale参数是准确的，你可以直接用locale+slug两个参数去CMS中查询对应内容，不需要强制要求context.params.slug和路径上的完全一致，只要能匹配到对应多语言内容即可。

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