Next.js内部页面getStaticProps函数无法找到locales文件路径问题求助

问题原因 #

你遇到的问题核心来自三点：

1. 相对路径层级计算错误
2. Webpack对动态require的路径上下文限制
3. 未配置路径别名导致@/前缀不生效

解决方案 #

方案1：修正相对路径层级

如果你的locales文件夹和pages文件夹同级（位于项目根目录），那么pages/settings/locations/index.js需要向上跳3级才能到达根目录：

export function getStaticProps({ locale }) {
  return {
    props: {
      // ../../只能跳到pages目录，再加../才到根目录
      messages: require(`../../../locales/${locale}.json`),
    },
  };
}

方案2：配置路径别名后使用@前缀

首先在项目根目录新建jsconfig.json（TS项目用tsconfig.json）配置别名：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./*"]
    }
  }
}

配置后重启开发服务，就可以正常使用@/前缀的路径：

messages: require(`@/locales/${locale}.json`)

方案3：规避动态require问题（最稳妥）

Webpack处理带变量的动态require时容易出现路径扫描错误，可以直接静态引入所有语言包再按locale取值：

// 顶部静态引入所有语言包，自行补充你的其他语言版本
import enLocale from '@/locales/en.json'
import zhLocale from '@/locales/zh.json'
const localeMap = {
  en: enLocale,
  zh: zhLocale
}

export function getStaticProps({ locale }) {
  return {
    props: {
      messages: localeMap[locale]
    },
  };
}

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