2

Control Locales In NextJS

 2 years ago
source link: https://dev.to/manoryanir/control-locales-in-nextjs-4dmo
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
yanir manor

Posted on Nov 15

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 modeExit 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 modeExit 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 modeExit 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


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK