Search code examples
internationalizationnext.jsmodule.exports

How to combine withPlugins with internatioinalization config in a next.config.js file

I have the following code in my next.config.js

const withPlugins = require('next-compose-plugins');
const optimizedImages = require('next-optimized-images');

module.exports = withPlugins([optimizedImages], { target: 'serverless' });

and now I need to add the following config to the file, combining with the plugin

i18n: {
    locales: ["en", "es"],
    defaultLocale: "en",
  },

I have tried the following,

const nextConfig = {
  i18n: {
    locales: ["en", "es"],
    defaultLocale: "en",
  },
};

module.exports = withPlugins([
[optimizedImages, {
    target: 'serverless'
    },
  ],
nextConfig,
])

and restarted the server, but I have not been successful ...

Solution

  • What version of Next.JS are you using? I faced the same problem and it was fixed by updating to +10.0.0.

    You can see on the i18n documentation on Next that this is the minimum version.

    Next.js has built-in support for internationalized (i18n) routing since v10.0.0. You can provide a list of locales, the default locale, and domain-specific locales and Next.js will automatically handle the routing.

    More info: https://nextjs.org/docs/advanced-features/i18n-routing