DEV Community

yanir manor
yanir manor

Posted on

Control Locales In NextJS

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"]
  }
}
Enter fullscreen mode Exit fullscreen mode

When you are done go to next.config and add it to the module

const nextTranslate = require("next-translate");

module.exports = {
  reactStrictMode: true,
  ...nextTranslate(),
};

Enter fullscreen mode Exit fullscreen mode

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>
  );
}
Enter fullscreen mode Exit fullscreen mode

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

Discussion (0)