使用静态超文本标记语言导出Next.js中的客户端初始化

Question

我们正在使用react-i18next开发一个用于本地化的Next.js应用程序。我们使用< code >下一次导出(静态HTML导出)。react-i18next库需要初始化代码，我不知道在哪里调用它。

（我们不使用next-i18next，因为这不适用于下一次导出。）

现在我在单独的模块（页面/之外）中进行初始化。如果我将该模块导入 pages/_app.tsx 并运行构建脚本（下一个构建

错误：设置原始模式 EIO

如果我尝试从自定义文档导入它，也会发生同样的情况。

我目前的解决方法是在页面/index.tsx中导入初始化模块——这是可行的，但感觉不对。

该项目使用TypeScript和yarn v1，并用创建下一个应用（以防其中任何一个相关）构建。




Answer 1

自定义应用程序导入看起来确实是客户端初始化代码的正确位置(根据自定义聚合填充推断)。

问题是_app模块将在下次构建时执行

修复方法是将初始化代码包装在：

if (typeof window !== 'undefined') {
  // initialization code - will only run on client side
}

基于https://flaviocopes.com/nextjs-server-client-code/

这确实意味着初始化代码也不会在 Jest 测试中运行，但 react-i18next 可以被模拟。