Page Comparison

The next-i18next config file (next-i18next.config.js)

To configure next-i18next, a config file is required. This tells next-i18next what your defaultLocale and other locales are, so that it can preload translations on the server. More information about the config file can be found in the next-i18next docs.

...

We will then set the fallback language. This is so if we can not provide the preferred language for a user, we can specify another language as fallback. By default, the fallbackLng is set to the defaultLocale. In this case, we do not need to actually set the fallbackLng. Setting the fallbackLng can also increase the page size.

module.exports = {
  i18n: {
    // all the locales supported in the application
    locales: ['en-GB', 'en-US'], 
    // the default locale to be used when visiting
    // a non-localized route (e.g. `/about`)   
    defaultLocale: 'en-GB',
  },

  fallbackLng: 'en-GB',
}

...

The localePath setting configures the path for the localisation files based on the environment. This setting is used to get around issues in deployment with keys rendering instead of translations. More information about this issue can be found in the next-i18next documentation.

module.exports = {
  i18n: {
    // all the locales supported in the application
    locales: ['en-GB', 'en-US'], 
    // the default locale to be used when visiting
    // a non-localized route (e.g. `/about`)   
    defaultLocale: 'en-GB',
  },

  fallbackLng: 'en-GB',

  ns: ['common', 'application', 'validation'],
  defaultNS: 'application',
  fallbackNS: 'common',

  // configure the path for localization (i18n) files based on the environment
  // if the code is running on server side it will use ./public/locales
  // if the code is running on client side it will use /locales
  localePath:
    typeof window === 'undefined'
      ? require('path').resolve('./public/locales')
      : '/locales',
}

The next.config.js file

Modify your next.config.js file, by passing the i18n object into your next.config.js file, to enable localised URL routing:

next.config.js

const { i18n } = require('./next-i18next.config')

module.exports = {
  i18n,
}