javascript - 有什么方法可以访问 Next.js 中的 `__filename` 吗？

Question

我正在开发一个自定义 i18n 模块，并希望替换此代码(这是一个“关于我们”页面):

  const messages = (await import(`./about-us.${locale}.json`))
    .default as Messages;

经过

  const messages = (
    await import(`./${__filename.replace('.tsx', `.${locale}.json`)}`)
  ).default as Messages;

不幸的是 __filename解析为 /index.js (我猜是因为 Webpack？) - 有什么方法可以实现我在示例中尝试做的事情，或者这需要直接内置 Next.js 才能工作？

Answer 1

重构这个，让消费者不知道文件系统
剧透:我不会告诉你如何访问 __filename使用 Next.js；我对此一无所知。
这是一个比你建议的更好的模式，它完全避开了这个问题。
首先，设置:听起来你有一个文件夹，里面装满了这些 JSON 文件。我想象这个:

l10n/
    about-us.en-US.json
    about-us.fr-FR.json
    contact-us.en-US.json
    contact-us.fr-FR.json
    ... <package>.<locale>.json

该文件组织很好，但让每个潜在的l10n消费者都知道它是一个错误。

如果您稍后更改命名方案怎么办？您是否要手动编辑每个导入本地化文本的文件？你为什么要对 future 你这么差？

如果某个特定的语言环境文件不存在，您会更喜欢应用程序崩溃，还是回退到其他语言？1

最好创建一个带 packageName 的函数和 localeCode作为参数，并返回所需的内容。然后，该函数成为应用程序中唯一需要了解文件名、回退逻辑等的部分。

// l10n/index.js
export default function getLang( packageName, localeCode ) {
    let contentPath = `${packageName}.${localeCode}.json`
    // TODO: fallback logic
    return JSON.parse(FS.readFileSync(contentPath, 'utf8'))
}

定位和读取所需数据是一项复杂的工作，同时还要确保任何请求都不会获得空的有效负载，并且每个文本键都解析为一个值。动态 import + 健全的文件系统是一个好的开始(:掌声:)，但这种组合本身还不够强大。
在之前的工作中，我们构建了一个完整的微服务只是为了做这件事。 (我们还构建了一个单独的服务来获取翻译，以及一些私有(private)的 npm 包，以允许 web 应用程序从我们的 CMS 请求和使用语言包。)你不必走那么远，但它希望能说明问题空间不小。

1 后备逻辑:例如 en-UK & en-US通常可以互换；在紧急情况下，一些罗曼语组可能是可以接受的(想到西类牙语/葡萄牙语/巴西语)；也适用于日耳曼语等。哪些有效，哪些不依赖于内容和上下文，但没有任何版本的回退适合动态 import .