Create Multilingual Websites with Ease Part1: A Step-by-Step Guide to Next.js and i18next Integration!

A client asked me if I can add multiple languages to her website. I was like, "What! I haven't done something like this before." I was nervous initially, thinking it was going to be difficult to implement, but it wasn't. It was just easy to integrate using Next.js and i18next. If you have been finding a way to use multiple languages on your Next.js project, this article is going to guide you through every point to do it.

What is I18next

i18next is a popular internationalization framework for JavaScript that allows you to add multi-language support to your web applications. It provides a simple and powerful way to define translations and switch between different languages in your application.

But wait, first, what exactly is internationalization?

Well, internationalization is to make your application accessible and usable by people from different regions of the world, who speak different languages and have different cultural backgrounds.

Understanding what i18next is let's see how we can integrate it into your nextjs project.

• First, let's create a new Next.js project by running the following command in your terminal:

npx create-next-app multilang

This will create a new Next.js project in a directory named multilang.
Navigate into the by running cd multilang

• Next, since we are using nextjs, i18next have react hooks to use on react app called React-i18Next, to use it run the following command in your terminal:

npm install react-i18next i18next i18next-browser-languagedetector

This will install React-i18Next, i18next, and i18next-browser-languagedetector packages.

• After installing create a new folder named locales in the root directory of your project. Inside the locales folder, create a new JSON file named en.json and ng-pidgin.json

locales/
-- en.json
-- ng-pidgin.json

in the en.json file add the following content:

{
  "intro": "Hey, am Trust a frontend developer and a technical writer"
}

in the ng-pidgin.json file add the following content:

{
  "intro": "Afa, i be Trust , i be frontend developer and i be still technical writer "
}

You can add as many languages as you want in the locale folder. For my client, I implemented Nigerian pidgin ng-pidgin.json, but feel free to create your own language file for any language you want to translate to, such as Spanish or French.

• Next, let's update the _app.js file located in the pages directory. Replace the existing code with the following:

import { appWithTranslation } from 'next-i18next'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default appWithTranslation(MyApp)

Here, we have wrapped the MyApp component with the appWithTranslation higher-order component.

• Now, let's create a new file named i18n.js in the root directory of your project. This file is used to configure i18next with Next.js.

Inside the i18n.js file, add the following code

import i18n from 'i18next'
import { initReactI18next } from 'react-i18next'
import LanguageDetector from 'i18next-browser-languagedetector'
import en from './locales/en.json'
import ngPidgin from './locales/ng-pidgin.json'

i18n
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    resources: {
      en: { translation: en },
     'ng-PIDGIN': { translation: ngPidgin } 
    },
    fallbackLng: 'en',
    interpolation: {
      escapeValue: false
    }
  })

export default i18n

This code imports i18next, initReactI18next, LanguageDetector, and the translation file we created earlier en.json and ng-pidgin.json. It also initializes i18next with configuration options.

• Now import the i18n configuration into _app.js file

import { appWithTranslation } from 'next-i18next'
import "../i18n";

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default appWithTranslation(MyApp)

• Finally we are done with the integration, now we can use the translations in our components. Import useTranslation hook from react-i18next and use it to translate the text.

For example, create a new file named index.js in the pages directory and add the following code:

import { useTranslation } from 'react-i18next'

function Home() {
  const { t, i18n } = useTranslation()

  const changeLanguage = (lng) => {
    i18n.changeLanguage(lng)
  }

  return (
    <div>
      <h1>{t('intro')}</h1>
      <button onClick={() => changeLanguage('en')} disabled={i18n.language === "en"}>English</button>
      <button onClick={() => changeLanguage('ng-PIDGIN')} disabled={i18n.language === "ng-PIDGIN">Nigerian Pidgin</button>
    </div>
  )
}

export default Home

This code imports useTranslation from react-i18next and uses it to translate the intro key from the translation file also the changeLanguage function is used to switch the language, from english to pidgin.

View the code

Want to know more on how to use i18next?

• i8next documentation,
• @codewithonye blog post

Conclusion

i18next is a powerful and flexible framework for adding multi-language support to your web application. It can help you reach a wider audience with different language backgrounds. With react-i18next, you can easily implement i18next in a Next.js project.

But that's not all! i18next offers a range of features, including the ability to manage all your languages on a dashboard instead of going to your JSON file for any changes you've made. This makes it much easier to keep track of your translations and make updates as needed.

Overall, I believe that with this guide, you will be able to implement i18next on your personal website or for any of your client who needs it.

Thanks for reading, and as always, feel free to reach out to me! 😊