不能在Vercel上使用serverSideTranslations

Question

在我的索引页中，我使用serverSideTranslations函数。查找翻译文件时出现错误。此错误只发生在serverSideTranslations使用的页面上。

我被部署到Vercel和netflix。

在_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函数的错误信息

/var/task/public/locales/he/info . info:文件或目录不存在在对象。readdirSync (fs.js 1043:3):/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在数组中。map ()/var/task/node_modules/next-i18next/dist/commonjs/config/createConfig.js:180:44/var/task/node_modules/next-i18next/dist/commonjs/config/createConfig.js:221:29at _callee$ (/var/task/node_modules/next-i18next/dist/commonjs/serverSideTranslations.js:199:53)/var/task/node_modules/regenerator-runtime/runtime.js:63:40在发电机。调用[as _invoke] (/var/task/node_modules/regenerator-runtime/runtime.js:294:22)在发电机。下一步(/var/task/node_modules/regenerator-runtime/runtime.js:119:21) {errno: 2系统调用:"scandir",路径:/var/任务/公众/地区/他}

Answer 1

您应该修改项目中的next-i18next.config.js文件，并添加path。解析为区域设置路径。您可以在这个repo中看到一个示例。确保您知道locale文件夹的位置，并写入正确的路径。这个问题的答案在这个github线程中找到。

Answer 2

注释(Vercel和netflix)

一些无服务器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"),
}

更多信息请参考文档