CODEWITHSUNDEEP
next.jsnetlifyvercelnext-i18next
Nadav Avisror
Nadav Avisror

Reputation: 173

Can not use serverSideTranslations on Vercel

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' }

Upvotes: 7

Views: 5293

Answers (2)

Devendra
Devendra

Reputation: 165

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.localePath 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.

Upvotes: 12

HS1
HS1

Reputation: 658

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.

Upvotes: 13

Related Questions