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"]
  }
}

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