In today's world supporting translation for multi-languages is very important.
So how can we do it with Nextjs?
Nextjs is built by page, which means controlling different locales through routing.
First, you need to install the package
npm install next-translate
Then create a file i18n.json in the file you can control what languages you have, what is the default language, what file will load in a specific page or it will be global, and many more options.
{
"locales": ["en", "fr"],
"defaultLocale": "en",
"pages": {
"*": ["global"],
"/info": ["info"]
}
}
When you are done go to next.config and add it to the module
const nextTranslate = require("next-translate");
module.exports = {
reactStrictMode: true,
...nextTranslate(),
};
Great, we have completed the configuration 🤙.
Now create a locales folder in it, and add language and related files to each folder (you can see in the github project).
In each file, create an object with a key value.
Finally, go to the next page and use a translation like this to control it:
import useTranslation from "next-translate/useTranslation";
export default function Info() {
let { t } = useTranslation();
return (
<h1>{t("info:love")}</h1>
);
}
in the URL you can see the change by adding/fr/ for French otherwise it will be English.
Conclusion
Surprisingly I find localization very simple to use with this package.
Link: https://github.com/yanirmanor/next-locales
Top comments (0)