Can not use serverSideTranslations on Vercel - next.js

Question

In my index page i'm using serverSideTranslations function. getting error about finding file of translation.
this error happens only on pages that used by serverSideTranslations.
I deployed to Vercel and Netlify. in both of them i'v got the same error.
in _app.js i'm using appWithTranslation.
Dependencies:
"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
};
Error message from Vercel lambda function
ng request: Error: ENOENT: no such file or directory, scandir '/var/task/public/locales/he'
at Object.readdirSync (fs.js:1043:3)
at getLocaleNamespaces (/var/task/node_modules/next-i18next/dist/commonjs/config/createConfig.js:175:23)
at /var/task/node_modules/next-i18next/dist/commonjs/config/createConfig.js:181:20
at Array.map ()
at getNamespaces (/var/task/node_modules/next-i18next/dist/commonjs/config/createConfig.js:180:44)
at createConfig (/var/task/node_modules/next-i18next/dist/commonjs/config/createConfig.js:221:29)
at _callee$ (/var/task/node_modules/next-i18next/dist/commonjs/serverSideTranslations.js:199:53)
at tryCatch (/var/task/node_modules/regenerator-runtime/runtime.js:63:40)
at Generator.invoke [as _invoke] (/var/task/node_modules/regenerator-runtime/runtime.js:294:22)
at Generator.next (/var/task/node_modules/regenerator-runtime/runtime.js:119:21) {
errno: -2,
syscall: 'scandir',
path: '/var/task/public/locales/he'
}

Answer 1

You should modify next-i18next.config.js file in your project, and add path.resolve to locale path. You can see an example in this repo. Make sure that you know where your locale folder is located, and write the correct path.
The answer to this issue was found in this github thread.

Answer 2

Note(Vercel and Netlify)
Some serverless PaaS may not be able to locate the path of your translations and require additional configuration. If you have filesystem issues using serverSideTranslations, set config.localePath to use path.resolve.
Solution
You have to set config.locationPath into the next-i18next.config.js file.
For example,
// 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"),
}
For more information please refer to the documentation.