为什么getStaticPaths中配置的lang参数无法传入getStaticProps？

问题核心表现 #

• 在getStaticPaths方法中为所有生成路径配置了lang、eventId两个自定义动态参数
• 静态构建阶段触发getStaticProps执行时，打印的context对象中未返回配置的lang参数，仅能识别到路由结构中定义的参数

根本原因 #

Next.js 对getStaticPaths返回的路径参数存在严格的匹配规则：只有和当前页面路由文件中定义的动态段完全对应的字段，才会被注入到getStaticProps的context上下文中；未在路由结构里声明的自定义参数，会在静态生成阶段被直接过滤丢弃。
常见的不匹配场景参考：如果当前页面文件路径为pages/events/[eventId].tsx，路由结构仅定义了eventId一个动态段，哪怕在getStaticPaths中给每个路径手动加上lang参数，Next.js 也不会将这个字段纳入context的params中。

对应解决方案 #

方案1：调整路由结构匹配参数定义 #

如果需要将lang作为路由层级的正式动态参数，直接修改页面文件的存储路径，让路由结构和getStaticPaths中返回的params字段完全对应。
比如需要同时携带lang、eventId两个动态参数，可将页面文件移动到如下路由路径：

pages/[lang]/events/[eventId].tsx

此时路由结构包含两个动态段[lang]、[eventId]，和原本在getStaticPaths中定义的params字段完全匹配，重新触发构建后，即可在getStaticProps的context.params中同时获取到lang和eventId两个参数。

方案2：不修改路由结构时的参数传递方式 #

如果不想调整现有路由层级，可将lang参数作为查询参数挂载到对应路由路径上，修改getStaticPaths的路径生成逻辑，在定义路径对应的path字段时拼接上lang的查询参数，例如单条路径结构可调整为：

{
  params: { eventId: eventId },
  path: `/events/${eventId}?lang=${lang}`
}

在getStaticProps中即可通过context.params拿到eventId，同时从路由的查询参数中解析获取lang值。

注意事项 #

• 修改完路由结构后，需要删除项目目录下的.next缓存文件夹，避免旧的路由缓存导致参数识别异常
• getStaticPaths返回结构中，params字段的名称必须和路由文件中的动态段名称完全一致，大小写不匹配也会导致参数被过滤
• 配置fallback: true时，参数匹配校验规则同样生效，未被路由结构声明的参数不会被透传到getStaticProps上下文中
• 编写getStaticProps时无需对context做特殊展开解构，直接读取context.params即可获取所有已匹配的路由动态参数，参考写法：

export const getStaticProps: GetStaticProps = async (context) => {
  // 所有路由定义的动态段参数都会存在于params对象中
  const { params } = context
  console.log(params)
}

内容的提问来源于stack exchange，提问作者Gyarmati István