Next-i18next Initial locale argument was not passed into serverSideTranslations

Question

It works locally. However, it will make nextServer 500 internal error once I deployed it on firebase.

next-i18next version

8.1.3

Config

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

Codes

_app.tsx

import { appWithTranslation } from 'next-i18next';

const App = ({ Component, pageProps }: AppProps): JSX.Element => {
  return (
    <Provider store={store}>
      <MainWrapper>
        <Component {...pageProps} />
      </MainWrapper>
    </Provider>
  );
};

export default appWithTranslation(App);

code snippets regarding serverSideRendering

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

export const getServerSideProps: GetServerSideProps = async (context) => {
  const { teamId, email } = context.query;
  let teamName;

  if (!teamId) {
    return { props: {} };
  }

  if (teamId) {
    teamName = await getTeamName(teamId as string);
  }

  return {
    props: {
      teamId,
      teamName,
      email: email || '',
      ...(await serverSideTranslations(context.locale, [])),
    },
  };
};

What error message are you getting? – juliomalves Apr 09 '21 at 12:49 — juliomalves, Apr 09 '21 at 12:49
I have the same error – Baptiste Arnaud Apr 10 '21 at 13:14 — Baptiste Arnaud, Apr 10 '21 at 13:14

score 13 · Answer 1 · answered Sep 09 '21 at 11:19

13

I had The Same Issue, And Then I remembered that I have to RESTART NEXTJS SERVER MANUALLY after change next.config.js file.

Restart the server helped me.

answered Sep 09 '21 at 11:19

Tuyen Bui

131
1
3

This. Thank you. I forgot to restart the server... – Delice Jun 29 '22 at 13:18

score 3 · Answer 2 · edited Oct 29 '21 at 11:40

3

When using next-compose-plugins, from their Usage section,

// next.config.js
const withPlugins = require('next-compose-plugins');

module.exports = withPlugins([...plugins], nextConfiguration);

nextConfiguration should be the configuration, meaning an object.

so the following snippet should work:

module.exports = withPlugins(
  [withMdx(mdxConfig)],
  {
    i18n,
  }
)

edited Oct 29 '21 at 11:40

Ravikumar B

779
1
14
25

answered May 24 '21 at 17:07

MikeMajara

922
9
23

This kept me busy for too long. It's easy to miss that `i18n` **needs to be in the second argument** of `withPlugins`, not in the first argument along with the plugins. – Martijn Jul 06 '21 at 07:25

score 3 · Answer 3 · answered Dec 07 '21 at 09:38

3

Don't forget to put the key i18n in your next-i18next.config file

answered Dec 07 '21 at 09:38

NeoZoom.lua

2,269
4
30
64

score 2 · Answer 4 · answered Apr 12 '21 at 23:24

I was having the same error a few days ago and, in my case, the root cause was my next.config.js file. I was using the next-compose-plugins and couldn't make it work with the configurations for the i18n.

That's how I had previously set up:

// next.config.js

module.exports = withPlugins([
  [
    withImages({
      esModule: true
    })
  ],
  i18n // error
])

So now I'm adding the configurations without the withPlugins:

// next.config.js

module.exports = withImages({
  esModule: true,
  i18n
})

Not sure if that will work for you, but for debugging purposes, I'd recommend testing your application using only the i18n configuration.

// next.config.js

module.exports = {
  i18n
}

Example of my next-i18next.config.js:

// next-i18next.config.js

module.exports = {
  i18n: {
    locales: ['pt', 'en-US'],
    defaultLocale: 'pt'
  }
}

score 0 · Answer 5 · answered Oct 19 '21 at 19:10

I encountered the same problem. I am deploying to App Service in Azure. Here are the thing that I made:

Update the next.config.js

const path = require("path");
require("dotenv").config();
const withPlugins = require('next-compose-plugins')
const { i18n } = require('./next-i18next.config');

const withImages = require("next-images")({
  reactStrictMode: true,
  eslint: {
    dirs: ["apiclients", "common", "components", "config", "pages", "stores"],
  },
  sassOptions: {
    includePaths: [
      path.join(__dirname, "styles"),
      path.join(__dirname, "components"),
    ],
    prependData: `@import "styles/_variables";`, // prepend _css variables in all css documents
  },
  images: {
    domains: [""],
  },
  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
    config.plugins.push(new webpack.EnvironmentPlugin(process.env));
    return config;
  },
  experiments: {
    asset: true,
  }
});

const plugins = [withImages];
const nextConfig = { i18n };

module.exports = withPlugins(plugins, nextConfig);

Include next.config.js and next-18next.config.js to the production build of the next JS
Restart the server

score 0 · Answer 6 · edited Dec 09 '21 at 16:26

0

withPlugins accepts two parameters，first one is array, last one(default) is

a object. you should put i18n into a object list this:

const plugins = [withImages];

const nextConfig = { i18n };

module.exports = withPlugins(plugins, nextConfig);


/**
 * Composes all plugins together.
 *
 * @param {array} plugins - all plugins to load and initialize
 * @param {object} nextConfig - direct configuration for next.js (optional)
 */
const _withPlugins = **([...plugins], nextConfig = {})** => (phase, {
  defaultConfig
}) => {
  ......
};

edited Dec 09 '21 at 16:26

Peter Csala

17,736
16
35
75

answered Dec 09 '21 at 13:27

Tomoconozaky

1
1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Dec 09 '21 at 16:26

Next-i18next Initial locale argument was not passed into serverSideTranslations

next-i18next version

Config

Codes

6 Answers6