• Stub

    • Getting next-i18next working

    Owned by Jag Goraya
    Last updated: Jan 04, 2024 by Millie Wilkinson
    2 min read

    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.

    In the project folder, create a new file and name it next-i18next.config.js .

    List the locales in an array, and list the defaultLocale.

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

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

    We will then follow the same pattern for the namespaces. Stating the namespaces here allows us to use multiple files within a locale to access translations.

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

    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.

    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

    Operated as a Community Resource by the Open Library Foundation