Next-i18next translation files not found error

Issues
1

Our site is using GitHub - isaachinman/next-i18next: The easiest way to translate your NextJs apps.
so we have translation files on public/static/locales folder. But now after deploy to server it says "ERROR
Error: ENOENT: no such file or directory, scandir '/var/task/public/static/locales/en

2

If localePath is set like this:

i18n: {
  localePath: "folder"
}

Change it to this:

i18n: {
  localePath: path.resolve("folder")
}

Make sure to include the path module. You can do so by adding the following line at the top of your configuration file:

const path = require("path");
3

The next-18next package has some issues working with serverless deployments, but these can be worked around:

First, you need to not use the default name for the next-i18next.config.js file. I recommend renaming it i18next.config.js. When you use the default name, the package will try to load it when the serverless function starts and since it is not bundled with the app, it will fail.

Then you need to explicitly provide the config to appWithTranslation and serverSideTranslations.

So in your pages/_app.js:

export default appWithTranslation(MyApp, require('../i18next.config')) // <~ need to explicitly pass the config here

and in your pages:

export async function getStaticProps({ locale }) {
  return {
    props: {
      ...(await serverSideTranslations(locale, ['common', 'footer'], require('../i18next.config'))), // <~ need to explicitly pass the config here.
      // Will be passed to the page component as props
    },
  };
}

Make sure you also import the config correctly with the new name into your next.config.js:

const { withLayer0, withServiceWorker } = require('@layer0/next/config')
const { i18n } = require('./i18next.config');

module.exports = withLayer0(
  withServiceWorker({
    // Output sourcemaps so that stacktraces have original source filenames and line numbers when tailing
    // the logs in the Layer0 developer console.
    layer0SourceMaps: true,
    i18n
  })
)

A working example app can be found here: GitHub - layer0-docs/layer0-next-i18n-example

1 Like