Easy guide to localize your Next.js project.
Tags: javascript, typescript, nextjs, json
Published: 2023-04-07 03:24:59


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:

1. Open the **`next.config.js`** file and add the following `i18n` object:
```javascript
const nextConfig = {
  reactStrictMode: true,
  i18n: {
    defaultLocale: "en",
    locales: ["en", "ar"],
    localeDetection: false,
  },
};

module.exports = nextConfig;
```
2. 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`:

```json
{
  "greet": "Hello"
}
```
And `ar.json`:

```json
{
  "greet": "مرحبا"
}
```
3. 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:

```js
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 };
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9w6b07jsgy0c4ozu1mv8.gif)



That's it! Now you can easily localize your Next.js project using its built-in i18n support.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xi9d0w87wmj7oxi35669.gif)

Here's an example too 
[I'm the example](https://codesandbox.io/p/github/Hewr-Srood/next-localization/master?file=README.md&workspace=%257B%2522activeFilepath%2522%253A%2522README.md%2522%252C%2522openFiles%2522%253A%255B%2522README.md%2522%255D%252C%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522gitSidebarPanel%2522%253A%2522COMMIT%2522%252C%2522spaces%2522%253A%257B%2522clg5zpi7s000x3t6mt99wvxqx%2522%253A%257B%2522key%2522%253A%2522clg5zpi7s000x3t6mt99wvxqx%2522%252C%2522name%2522%253A%2522Default%2522%252C%2522devtools%2522%253A%255B%257B%2522type%2522%253A%2522PREVIEW%2522%252C%2522taskId%2522%253A%2522dev%2522%252C%2522port%2522%253A3000%252C%2522key%2522%253A%2522clg5zpo7k006g3t6mmrt9rtxv%2522%252C%2522isMinimized%2522%253Afalse%252C%2522path%2522%253A%2522%252F%2522%257D%252C%257B%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522dev%2522%252C%2522key%2522%253A%2522clg5zpn1l00353t6myw5cbo1l%2522%252C%2522isMinimized%2522%253Afalse%257D%255D%257D%252C%2522clg5zraaz00283t6l9axscf8h%2522%253A%257B%2522key%2522%253A%2522clg5zraaz00283t6l9axscf8h%2522%252C%2522devtools%2522%253A%255B%255D%252C%2522name%2522%253A%2522New%2522%257D%257D%252C%2522currentSpace%2522%253A%2522clg5zraaz00283t6l9axscf8h%2522%252C%2522spacesOrder%2522%253A%255B%2522clg5zpi7s000x3t6mt99wvxqx%2522%252C%2522clg5zraaz00283t6l9axscf8h%2522%255D%252C%2522hideCodeEditor%2522%253Afalse%257D)