How to enable i18n in next.js

[Himadu2000]

According to current next.js documentation to add i18n support describe as following,
Adding i18n to config.js,
module.exports = withNx({ i18n: { defaultLocale: "en", locales: ["en", "de"], }, })
Adding,
export default appWithTranslation(CustomApp)
to _app.tsx

And export const getStaticProps = async ({ locale }) => ({ props: { ...(await serverSideTranslations(locale, ["common"])), }, }) to specific page and usage by, const { t } = useTranslation("common")

However this produce following error,
Error: Initial locale argument was not passed into serverSideTranslations

[kirjai]

What are the versions of @nrwl/next, next and next-i18next are you attempting this with?

[Himadu2000]

latest

[michael-proulx]

I have a similar issue while implementint next-i18next in a nx workspace, but works outside nx workspace.

next: 10.2.0
next-i18next: 8.2.0

At first I got the same error : Error: Initial locale argument was not passed into serverSideTranslations
After many test and re-build now my locale is 'en', now I got that error: Error: next-i18next was unable to find a user config
I don't understand...

next.config.js

const withNx = require('@nrwl/next/plugins/with-nx');
const { i18n } = require('./next-i18next.config');

module.exports = withNx({
  nx: {
    svgr: true
  },
  i18n
});

next-i18next.config.js

module.exports = {
  i18n: {
    defaultLocale: 'en',
    locales: ['en', 'fr']
  }
}

_app.tsx

import React from 'react';
import { appWithTranslation } from 'next-i18next';

const MyApp = ({ Component, pageProps }) => {
  return (
    <Component { ...pageProps } />
  );
};

export default appWithTranslation(MyApp);

index.tsx

import { serverSideTranslations } from 'next-i18next/serverSideTranslations';

...

export const getStaticProps = async ({ locale }) => ({
  props: {
    ...await serverSideTranslations(locale, ['common'])
  }
});

...

[michael-proulx]

#5445 I tested cd into the app and doing ../../node_modules/.bin/next everything works perfectly...

[jdecastroc]

I'm experiencing the same problem: "Error: next-i18next was unable to find a user config"

"next": "10.0.1",
"next-i18next": "^8.2.0",
"@nrwl/next": "11.5.2"

next.config.js

const withNx = require('@nrwl/next/plugins/with-nx');
const { i18n } = require('./next-i18next.config');

module.exports = withNx({i18n});

next-i18next.config.js

module.exports = {
  i18n: {
    defaultLocale: 'en',
    locales: ['en', 'ja']
  }
}

_app.tsx

import React from 'react';
import { AppProps } from 'next/app';
import { appWithTranslation } from 'next-i18next';

function CustomApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}

export default appWithTranslation(CustomApp)

index.tsx

import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
...
export const getStaticProps = async ({ locale }) => ({
  props: {
    ...await serverSideTranslations(locale, ['common'])
  }
});
...

[jdecastroc]

@michael-proulx

When executing the nx run project:serve in the app root folder it works. If I run the command outside the root of the specific project it won't work so I guess it is trying to read the next-i18next configuration based on where the serve command has been run.

Debugging I found that next-i18next/dist/commonjs is trying to read the next-i18next.config.js from the './next-i18next.config.js' meaning taking ./ as the place where the user is executing the command.

node_modules/next-i18next/dist/commonjs

L113.   console.log(_path["default"].resolve(DEFAULT_CONFIG_PATH));
L114.   throw new Error('next-i18next was unable to find a user config');

Output -> Folder where the user is executing the command

I'm not sure whether this is related then with nrwl/nx and how it executes the target commands or next-i18next project bug

[michael-proulx]

Good catch, so I tried the configOverride, but we are losing the concept of the default setup. So you need to call the config in every pages...

import nextI18NextConfig from '../next-i18next.config';

export const getStaticProps = async ({ locale }) => ({
  props: {
    ...await serverSideTranslations(locale, ['common'], nextI18NextConfig)
  }
});

We now have another error, because it is using the same concept.

Error: Default namespace not found at public\locales\en\common.json

...
const LOCALE_PATH = './public/locales'
...

export const defaultConfig = {
  ...,
  localePath: LOCALE_PATH,
  ...,
}

I have tried to override this path, but got the same error with any path I have tried.

[ibrahimAboelsuod]

This ^ + a path starting form nx repo root fixed the problem for now !

[anthodb]

@ibrahimAboelsuod could you explain a little more your solution?

[EpicHigh]

Because next-i18next has this issue this Nx, I change the library to next-translate instead. It works perfectly fine. But I'm looking forward to that Nx supports next-i18next in the future.

[updategroup]

This method client good but buid production error

export const getServerSideProps:GetServerSideProps = async () => ({
  props: {
    hello: 'Show',
  },
})

[EpicHigh]

I'm not sure that why you were using the getServerSideProps method. I just configured follow the document of next-translate and used only the useTranslation method in my components.

Here's my next.config.js:

const withNx = require('@nrwl/next/plugins/with-nx')
const withPWA = require('next-pwa')
const nextTranslate = require('next-translate')
const withAntdLess = require('next-plugin-antd-less')
const withImages = require('next-images')
const withPlugins = require('next-compose-plugins')

const env = process.env.NODE_ENV || 'development'

const nextConfig = {
  webpack5: true,
  cssModules: true,
  i18n: {
    locales: ['en'],
    defaultLocale: 'en',
  },
  future: {
    strictPostcssConfiguration: true,
  },
}

module.exports = withPlugins(
  [
    [withNx],
    [nextTranslate],
    [withImages],
    [
      withPWA,
      {
        pwa: {
          disable: env === 'development',
          dest: 'public',
        },
      },
    ],
    [
      withAntdLess,
      {
        modifyVars: {},
      },
    ],
  ],
  nextConfig
)

[TheGooner93]

According to this comment, it looks like that next-translate standard setup + NEXT_TRANSLATE_PATH will do the trick. Please find below an example repo :

https://github.com/gfortaine/nx-with-next-translate

This worked for me. To summarise I followed the following steps:

1. Setup an i18n.js in the app root directory
2. Modify next.config.js exactly as done in the above example repo
3. Add a NEXT_TRANSLATE_PATH with value app/<<app-name>> inside .env.local. Place it within your app root

[electroheadfx]

is it always work with Next 12.x ? because I have nothing, no error, no translation, weird. Thanks

[tokomeno]

after updating the packages i see I see that translations files are not copied in the dist folder as it was before and I got no translations when i start app, it worked fine for me till the update

"@nrwl/next": "15.0.3",
"next": "12.3.1",
"next-translate": "^1.6.0",

Any ideas?

[bennycode]

[Yuripetusko]

had the same problem with nx and nextjs. and migrated to next-translate. Yes migration was a bit of a drag but in the end everything works ok

[ibrahimAboelsuod]

This is my current work around:

next-i18next.config.js

const path = require('path');

module.exports = {
  i18n: {
    defaultLocale: 'en',
    locales: ['en', 'ar'],
    localePath: path.resolve(
      process.env.NEXT_PUBLIC_IS_DEVELOPMENT === 'true'
        ? './apps/my-website/public/locales'
        : './public/locales'
    )
  }
};

And so far I have to use this config in serverSideTranslations()
Note: NEXT_PUBLIC_IS_DEVELOPMENT is an environment variable I have to distinguish between local & deployed (in this case on Vercel)

[robinpellegrims]

Thank you for this suggestion. I solved it similarly by using one of the System Environment Variables that are automatically set by Vercel. This way there's no need to set any env variables myself.

[okanisildar]

I was having similar problems and found this issue to try this solution, also, in the documentation of next-i18next, there was some similar solution to this problem.

Now with this localePath addition, I still have the same error I believe

Error occurred prerendering page "/tr/admin/create-banner".
Error: ENOENT: no such file or directory, scandir '/vercel/path0/public/locales/en'

My component is as follows:

import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
import { useTranslation } from 'next-i18next';
import nextI18NextConfig from '../../next-i18next.config'

const {t} = useTranslation('validation')

export async function getStaticProps({ locale }) {
  return {
    props: {
      ...(await serverSideTranslations(locale, ['validation'],nextI18NextConfig)),
    },
  };
}

export default `CreateBanner`

My next-i18next.config.js is as follows:

const path = require('path');

module.exports = {
  i18n: {
    defaultLocale: 'en',
    locales: ['en', 'tr'],
    localePath: path.resolve('./public/locales')
  }
};

I'm using vercel and my versions are as follows:

• "next-i18next": "^11.0.0",
• "next": "12.1.0",
• "@nrwl/next": "^13.9.4",

Does anybody have some suggestions on how to fix this?

[okanisildar]

We switched to next-translate and didn't have any problem.
Thank you @EpicHigh for your comment.

[LorenzoGalassi]

@okanisildar did you manage to configure next-translate with Next.js 13+ and Nx? Can you share you repo by any chance?

[okanisildar]

Yes. I managed to do that. I can't share the repo since it's company's property. I left the company and can't remember the details of the implementation but it was something fairly straight-forward. What is you issue?

[bboyz269]

I created a sample repo nx-next-i18next-standalone that have next-i18next "well-behave" within docker image. Thanks to all comments from this thread!
Though, file paths is a mess and probably won't work with normal "nx serve --prod" or being deployed to Vercel.
// Can anyone confirm if Vercel's Turborepo have better integration?

[igorashs]

Managed to do in this way
made an util using my config as default param, allowing to pass other params if needed for og function

import { UserConfig } from 'next-i18next';
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';

import nextI18NextConfig from '../../../next-i18next.config';

/**
 * ssr translations with default config
 * @param locale
 * @param namespacesRequired
 * @param configOverride
 * @param extraLocales
 */
export const ssrTranslations = async (
  locale: string,
  namespacesRequired?: string[] | undefined,
  configOverride?: UserConfig | null,
  extraLocales?: string[] | false,
) => serverSideTranslations(locale, namespacesRequired, nextI18NextConfig ?? configOverride, extraLocales);

usage in page

// and i can use my util in page
export async function getStaticProps({ locale }) {
  return {
    props: {
      ...(await ssrTranslations(locale, ['common', 'home'])),
      // Will be passed to the page component as props
    },
  };
}

This is my 'next-i18next.config.js' file

module.exports = {
  i18n: {
    defaultLocale: 'en',
    locales: ['en'],
  },
  reloadOnPrerender: process.env.NODE_ENV === 'development',
  localePath: 'apps/app-name/public/locales', //note: using absolute path
};

[ancyrweb]

This is a wrong solution. It creates a dist folder on build but will look up the parent apps folder which is a leak.

[JulianBerger]

For me it works with the following line in the next.config.js:

process.env.I18NEXT_DEFAULT_CONFIG_PATH = `${__dirname}/next-i18next.config.js`;

together with this next-i18next.config.js:

const path = require('path');

module.exports = {
  i18n: {
    defaultLocale: 'en',
    locales: ['en', 'de'],
  },
  localePath: path.resolve('./apps/product-page/public/locales'),
};

`
``

[jaosn60810]

This solution worked like a charm, thank you! 🎉

and it also work if i use string without path

{
  localePath: './apps/<nextjs-app>/public/locales',
}

[jaosn60810]

If you're using getServerSideProps and facing issues with next-i18next in a production environment like Docker,
use typeof window === 'undefined' to distinguish between server-side and client-side execution. official documentation

// next-i18next.config.js
const { resolve } = require('path');

/** @type {import('next-i18next').UserConfig} */
module.exports = {
  i18n: {
    locales: ['zh-TW', 'cn-CH', 'en-US', 'ja-JP', 'ko-KR'],
    defaultLocale: 'zh-TW',
  },
  //* The default value is 'common', set it to the name of one of our existing JSON files, otherwise it will complain that it can't read 'common.json'
  defaultNS: 'Warning',
  //* When running nx serve or nx build, use the following line to read i18n JSON files
  localePath: resolve('./apps/app-name/public/locales'),
  //* When building a Docker image or container, use the line below; otherwise, getServerSideProps won't read the JSON files
  // localePath:
  //   typeof window === 'undefined' ? resolve('./public/locales') : '/locales',
};

[jaosn60810]

This works

/** @type {import('next-i18next').UserConfig} */
module.exports = {
  i18n: {
    locales: ['zh-TW', 'cn-CH', 'en-US', 'ja-JP', 'ko-KR'],
    defaultLocale: 'zh-TW',
  },
  interpolation: {
    prefix: '{',
    suffix: '}',
  },
  localeStructure: '{lng}/{ns}',
  //* 預設值是 common，要設定成我們有的 json 檔名稱，不然會說讀不到 common.json
  defaultNS: 'Warning',
  localePath: `${__dirname}/public/locales`,
};