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, [])),
    },
  };
};

Answer 1

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

Answer 2

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,
  }
)

Answer 3

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.