Can not use serverSideTranslations on Vercel

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.