无法在 Vercel 上使用 serverSideTranslations

Question

在我的索引页面中，我正在使用

serverSideTranslations

功能。查找翻译文件时出现错误。 此错误仅发生在

serverSideTranslations

使用的页面上。

我部署到 Vercel 和 Netlify。在他们两个中我都遇到了同样的错误。

在

_app.js

我正在使用

appWithTranslation

。

依赖关系：

"dependencies": {
    "@fortawesome/fontawesome-free": "^5.15.4",
    "@netlify/plugin-nextjs": "^3.9.2",
    "axios": "^0.21.1",
    "bootstrap": "^4.6.0",
    "dayjs": "^1.10.4",
    "dotenv": "^8.2.0",
    "fs-extra": "^10.0.0",
    "is-mobile": "^3.0.0",
    "next": "^11.1.2",
    "next-i18next": "^8.9.0",
    "next-seo": "^4.20.0",
    "node-fetch": "^2.6.1",
    "parse": "^3.1.0",
    "react": "17.0.1",
    "react-bootstrap": "^1.5.0",
    "react-dom": "17.0.1",
    "react-infinite-scroller": "^1.2.4",
    "recoil": "^0.1.2",
    "sass": "^1.43.2",
    "ts-node": "^9.1.1"
  }

next.config.js

const path = require('path');
const { PHASE_DEVELOPMENT_SERVER } = require('next/constants')
const i18NextConfig = require('./next-i18next.config');

const prodConfig = {
    generateBuildId: () => 'build-id',
    compress: true,
    target: 'serverless',
    i18n: i18NextConfig.i18n,
    sassOptions: {
        includePaths: [path.join(__dirname, 'styles')],
    },
}
module.exports = (phase, { defaultConfig }) => {
    if (phase === PHASE_DEVELOPMENT_SERVER) {
        return {
            ...defaultConfig,
            ...prodConfig,
            compress: false,
        }
    }

    return prodConfig;
}

next-i18next.config.js

const path = require('path');

module.exports = {
  i18n: {
    defaultLocale: 'he',
    locales: ['he'],
    localePath: path.resolve('./locales'), // <<< i tried to put this line here
  },
  keySeparator: '>',
  nsSeparator: '|',
  reloadOnPrerender: false,
  localePath: path.resolve('./locales'), // <<< and also here
};

来自 Vercel lambda 函数的错误消息

ng 请求：错误：ENOENT：没有这样的文件或目录，scandir '/var/task/public/locales/he' 在 Object.readdirSync (fs.js:1043:3) 在 getLocaleNamespaces (/var/task/node_modules/next-i18next/dist/commonjs/config/createConfig.js:175:23) 在/var/task/node_modules/next-i18next/dist/commonjs/config/createConfig.js:181:20 在Array.map() 在 getNamespaces (/var/task/node_modules/next-i18next/dist/commonjs/config/createConfig.js:180:44) 在createConfig（/var/task/node_modules/next-i18next/dist/commonjs/config/createConfig.js:221:29） 在 _callee$ (/var/task/node_modules/next-i18next/dist/commonjs/serverSideTranslations.js:199:53) 在 tryCatch (/var/task/node_modules/regenerator-runtime/runtime.js:63:40) 在 Generator.invoke [as _invoke] (/var/task/node_modules/regenerator-runtime/runtime.js:294:22) 在 Generator.next (/var/task/node_modules/regenerator-runtime/runtime.js:119:21) { 错误号：-2， 系统调用：'scandir'， 路径：'/var/task/public/locales/he' }

Answer 1

您应该修改项目中的 next-i18next.config.js 文件，并将 path.resolve 添加到 locale 路径。您可以在 this 存储库中查看示例。确保您知道区域设置文件夹所在的位置，并写入正确的路径。 这个问题的答案可以在 this github thread 中找到。

Answer 2

注意（Vercel 和 Netlify）

某些无服务器 PaaS 可能无法找到您的翻译路径并需要额外配置。如果您在使用

serverSideTranslations

时遇到文件系统问题，请将

config.localePath

设置为使用

path.resolve

。

解决方案

您必须将

config.localePath

设置到

next-i18next.config.js

文件中。

例如，

// next-i18next.config.js

const path = require("path");

module.exports = {
  i18n: {
    defaultLocale: 'en',
    locales: ['en', 'fr'],
  },
  // Path to the translation files
  // i.e., ./public/locales/en.json, ./public/locales/fr.json
  localePath: path.resolve("./public/locales"),
}

有关更多信息，请参阅文档。