Add a Translation Feature to Your Next.JS App Part 2: Manually Switch Languages in next-i18next package

This article is going to talk about how you can switch languages manually in your next.js app. To set up the feature, you can go back to my previous article. So I assume that your app is able to grab different scripts from corresponding languages scrips already. Also, I built a repo to demonstrate this so feel free to visit there.

Add the Button

First, I am going to use the help of material-UI to simply add a button for switching languages. You can run this:

npm install @material-ui/icons @material-ui/core

Then after installing successfully, you can import these components that we will use:

import TranslateIcon from "@material-ui/icons/Translate"
import { Button } from "@material-ui/core"

With some simple codes like this:

<Button aria-controls="simple-menu" aria-haspopup="true"  color="primary" startIcon={<TranslateIcon />}>
           Switch Language
</Button>

we get a button to switch languages👇

Make that button work!

Now it is time to make it work by giving the button a onClick method like this:

<Button aria-controls="simple-menu" aria-haspopup="true"  color="primary" onClick={handleClick} startIcon={<TranslateIcon />}>
           Switch Language
</Button>

In the handleClick function, we need to do two things:

1. Detect what language we are using right now.
2. Switch the language to another one.

Remember in last article we talk about how to set up a file called i18n.js ? We need to import i18n from it like this:

import { withTranslation, i18n } from "../i18n"

And then we can use that i18n.

To detect what language is in use, use i18n.language. In our case, it will tell you if the language is zh or en.

To switch language, just use the method coming with it: changeLanguage. You can call it like this: i18n.changeLanguage(the new language).

So now we can use those two methods in our handleClick function. Since in the app, we probably need to use that language a lot(to decide the icon or other UI), so I like to use state to store the language and use it later. So I set up a language state first and use it in my handleClick function:

const [language, setLanguage] = useState("en")
const handleClick = () =>{
    language=="en"? setLanguage("zh") : setLanguage("en")
    i18n.changeLanguage(language)
  }

In the first line, I decide what language is in use now and set language to be another one and then change it through the second line of code. That links my own state with i18n language.

Bonus: If you want to make the button show your current language, simply change codes in the button like this:

<Button aria-controls="simple-menu" aria-haspopup="true"  color="primary" onClick={handleClick} startIcon={<TranslateIcon />}>
           {i18n.language=="en"? "English" : "中文"}
</Button>

So depending on the language in use, the corresponding text will be rendered!

End

That’s it for this week! Next time I am going to continue and write about adding a language-specific URL to the app with localSubPaths. Thanks for reading!

Resources:

1. next-i18next package
2. My example repo
3. Add a translation feature to your Next.js App Part 1: Set up the next-i18next package
4. Add a Translation Feature to Your Next.JS App Part 3: Add language-specific URL