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:
- Detect what language we are using right now.
- 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!