Easy guide to localize your Next.js project.

#javascript #typescript #nextjs #json

In this article, I will demonstrate how to localize your Next.js project using its built-in internationalization (i18n) support, without the need for any third-party packages.

To get started, follow these steps:

Open the next.config.js file and add the following i18n object:

const nextConfig = {
  reactStrictMode: true,
  i18n: {
    defaultLocale: "en",
    locales: ["en", "ar"],
    localeDetection: false,
  },
};

module.exports = nextConfig;

Create a new directory named localization in the src directory and add the following files inside it: index.js en.json ar.json In en.json and ar.json, define your localized strings as key-value pairs.

For example, en.json:

{
  "greet": "Hello"
}

And ar.json:

{
  "greet": "مرحبا"
}

In index.js, import the localization files and create a custom hook for functional components and a HOC for class components to access the localized strings:

import en from "./en.json";
import ar from "./ar.json";
import { useRouter } from "next/router";
import { useCallback } from "react";

const locales = { en, ar };
const useTranslation = () => {
  const router = useRouter();

  const changeLanguage = (locale) => {
    if (locale !== router.locale) {
      // We change the language
      // and push the new route to the router
      router.push(
        {
          route: router.pathname,
          query: router.query,
        },
        router.asPath,
        { locale }
      );
    }
  };

  /* 
    We receive the string and 
    return the localized string,
    If the string is not found in the localization 
    file it will return the original string 
  */
  const t = useCallback(
    (str) => locales[router.locale][str] || str,
    [router.locale]
  );

  return { t, changeLanguage, currentLanguage: router.locale };
};

const withTranslation = (Component) => (props) => {
  const { t, changeLanguage, currentLanguage } = useTranslation();
  return (
    <Component
      {...props}
      t={t}
      changeLanguage={changeLanguage}
      currentLanguage={currentLanguage}
    />
  );
};

export { useTranslation, withTranslation };