This content originally appeared on Level Up Coding - Medium and was authored by Weian Wang
Exploring Next.js : multi-lingual support with next-i18next
Nowadays multi-lingual support is getting more and more important. It has already become a standard in modern websites. There are many ways to achieve it. But it is very important to do it early in a project. Apply multi-lingual support to the existing web could be painful because you have to pull out all strings in your project. That’s a lot of work which you definitely don’t want to do.
Luckily to react community, there are a lot of handy libraries. If you are using Next.js with your react project, next-i18next is a good choice. I am going to provide a simple example for using next-i18next to support multi-lingual functions. Let’s do this!
Build up project
First set up your Next.js project. And install next-i18next.
Check it on npm:
npm install — save next-i18next
or
yarn add next-i18next
Then create a static folder under ./public, and a locales folder under it. In the locales folder, we have to create folders of each language we are going to support in our project and name them with language code. Which will be en(English), zhHant(Chinese), fr(French) and es(Spanish). All our contents should be placed under these folders in order by language. The structure should be like below:
Create a file under root directory: i18n.js, this is to export all the methods we will going to use from next-i18next. LocalePath is required, and we must pass an absolute path to it. In order to stay simple, I am just using this project’s structure.
We should also set up defaultLanguage, otherLanguages and localeSubpaths here. We will talk about localeSubpaths later. Our default language is English, so just pass its language code to defaultLanguage, which is ‘en’. And we have three more languages to support which are Chinese, French and Spanish. We pass an array with these three to otherLanguages. Always pass an array to otherLanguages even you have only one other language.
Open our _app.js, if you haven’t got one, just create it under the pages folder. Import appWithTranslation and wrap the component with it. Obviously appWithTranslation is a higher order component(HOC). Remember to extend App if you are using class component. If you are using functional component like me, just do like below:
Now it is supposed to work for testing it, let’s go to locales folder we created under ./public, then just put contents into json file under each language’s folder.
Let’s build a page, add a Sample folder under ./pages, and a Sample.js under ./component. In order to pass the function with translation functionality to our component, we have to wrap the component with withTranslation HOC, and pass namespaces into it. We also need a namespacesRequired array via getInitialProps. Remember these steps are all required to all page-level component.
In our component we also wrap the component with withTranslation HOC , and pass namespaces into it. Then we get t function as props which can help us get contents from locales. A little tip: If you have more props to pass in, just use the Destructuring Assignment syntax, do it like this:
const Sample = ({t,...props}) => {}
And the way we change language is using changeLanguage function from i18n. I call it in handleChange function. Check the code below:
I created a drop-down menu by using select component from Material-UI. Ideally every time I select a language from drop-down menu, language on this page should change to the one I just selected. Let’s see what happen!
Locale path
It’s working! But hold on. If you want dynamic url according to different languages, there is one more thing to do.
Open i18n.js and pass an object to localeSubpaths in NextI18Next. Namespaces as key, subpath as value(without slash). For example:
localeSubpaths:{
zhHant:'cn',
fr: 'fr',
es: 'es'
}Then open your next.config.js, again if you haven’t got one, just create it under root directory. Import localSubpaths and pass it via the nextI18NextRewriters.
Let’s see what happen!
It’s done! Now you know how to support multi-lingual with this awesome library. Go make your website cooler, what are you waiting for!
Exploring Next.js : multi-lingual support with next-i18next was originally published in Level Up Coding on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Level Up Coding - Medium and was authored by Weian Wang
Weian Wang | Sciencx (2021-02-25T01:21:27+00:00) Exploring Next.js : multi-lingual support with next-i18next. Retrieved from https://www.scien.cx/2021/02/25/exploring-next-js-multi-lingual-support-with-next-i18next/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.