CODEWITHSUNDEEP
next.jsi18nextnext-i18next
Jason Mendoza
Jason Mendoza

Reputation: 101

Next-i18next Initial locale argument was not passed into serverSideTranslations

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

Upvotes: 9

Views: 19757

Answers (6)

Tomoconozaky
Tomoconozaky

Reputation: 1

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
}) => {
  ......
};

Upvotes: 0

NeoZoom.lua
NeoZoom.lua

Reputation: 2891

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

Upvotes: 4

MikeMajara
MikeMajara

Reputation: 962

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

Upvotes: 3

asteriskdothmg
asteriskdothmg

Reputation: 86

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

  1. 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);

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

Upvotes: 0

Tuyen Bui
Tuyen Bui

Reputation: 131

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.

Upvotes: 13

gasscoelho
gasscoelho

Reputation: 662

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

Upvotes: 2

Related Questions