URL Localization using NextJS

When we say localization, we think of translations of site content in first. For this reason, lots of the packages just do content translations. But in some scenarios we want to localize/translate the URL by the user language. In this situation we can use benefit of rewrites config that NextJS provides us. (NextJS version 9.5.0 >)

At the end of this post, I want you to have an idea of localization of both site content and URL. Also you can see the example repository of this post by clicking here

First step: installation next-i18next

In the following sections, we are going to use rewrites config that NextJS provides us by default for localizing of URL. But as a first step we need next-i18next package for localizing site content. To do that:

yarn add next-i18next

After that, we create a config file called next-i18next.config.js in our project directory for the requirements of next-i18next. And basically we fill inside as below

module.exports = {
  i18n: {
    defaultLocale: "en",
    locales: ["en", "tr"],
  },
};

In the config above, we specify the languages that we are going to use in our site (locales) and the language that we want to use as default language (defaultLocale.

Languages provided in locales will use for URL prefix. Ex: /en/home.

Language provided in defaultLocale will use to remove language prefix when user comes with the default language. Ex: /en/home -> /home

Then we import and use the i18n in the NextJS own config file that called next.config.js

const { i18n } = require("./next-i18next.config");

module.exports = {
  i18n,
};

After adding i18n config to next.config.js, it is time to create translations files that we defined in locales array. By default next-i18next will looking for the translations file in public/locales/[locale]/[fileName].json directory, so then we create our files in here.

If you want to keep your translations files to somewhere else please read the documentation. It is easy to handle.

After creating translations files, there is only one step to be done. We wrap _app.js file with the appWithTranslation component. (if you don't have custom _app.js, you can learn more about it from here)

import { appWithTranslation } from "next-i18next";

const MyApp = ({ Component, pageProps }) => <Component {...pageProps} />;

export default appWithTranslation(MyApp);

With this step, we can use translations by importing serverSideTranslations in the getStaticProps or getServerSideProps methods of any pages. Ex:

import { serverSideTranslations } from "next-i18next/serverSideTranslations";

export async function getStaticProps({ locale }) {
  return {
    props: {
      ...(await serverSideTranslations(locale, ["footer"])),
    },
  };
}

Above props defining must be used in every page that we want to translate. Otherwise next-i18next will thrown an error because of can't access translation json files and language config.

We have done all configurations that needed for content translations. Now we can use translations by importing useTranslations hook in anywhere that we want to use.

import { useTranslation } from "next-i18next";

export const Footer = () => {
  const { t } = useTranslation("footer");

  return (
    <footer>
      <p>{t("description")}</p>
    </footer>
  );
};

Second step: Localization of URL

As I mentioned in the beginning of the post, we are going to handle localization of URL with rewrites config that NextJS provides us. To do that, we add rewrites function into next.config.js that we created beginning of the post.

const { i18n } = require("./next-i18next.config");

module.exports = {
  i18n,
  rewrites: async () => [
    {
      source: "/en/home",
      destination: "/en/",
      locale: false,
    },
    {
      source: "/tr/anasayfa",
      destination: "/tr",
      locale: false,
    },
    {
      source: "/en/about",
      destination: "/en/about",
      locale: false,
    },
    {
      source: "/tr/hakkimizda",
      destination: "/tr/about",
      locale: false,
    },
  ],
};

We create a config like above in the simplest form. As we see rewrites takes an array that contains objects. An every object has:

• source: the path of URL that user entered
• destination: the page that will be rendered ('/' will render -> 'pages/index')
• locale: determining of either including the locale prefix or not to source that we provided (false or undefined)
• for more configurations please read official documentation. There are good options like has...

With above config, when user land /home or /tr/anasayfa URL, NextJS automatically render / (pages/index). And when user land /about or /tr/hakkimizda URL, NextJS automatically render /about (/pages/about). Also we serve the site content localized by using the URL prefix.

More

Your website will be support both content and URL localization thanks to above steps. As an extra, you can reach the essential methods like changing language, route pushing via source code