This content originally appeared on DEV Community and was authored by yanir manor
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
This content originally appeared on DEV Community and was authored by yanir manor
yanir manor | Sciencx (2021-11-15T08:59:14+00:00) Control Locales In NextJS. Retrieved from https://www.scien.cx/2021/11/15/control-locales-in-nextjs/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.