[Next.js] Localization

2022-04-01 hit count image

Let's see how to use next-translate for the localization on the Next.js project based on TypeScript.

Outline

In this blog post, I will introduce how to support the localization on the Next.js project based on TypeScript using next-translate.

You can see the full source code of thie blog post on the following link.

Blog list

This blog post is a series. If you want to check other blog posts of the series, see the links below.

Create Next.js project with TypeScript

To see how to use next-translate on the Next.js project based on TypeScript, execute the following command to create a Next.js project based on TypeScript.

npx create-next-app --typescript my-app

Install next-translate

To provide the localization by next-translate on the Next.js project, we need to install next-translate. Execute the following command to install next-translate.

npm install --save next-translate

Configure next-translate

To use next-translate, we need to configure it. First, open the ./next.config.js file and modify it like the below.

const nextTranslate = require('next-translate');

module.exports = nextTranslate();

And then, create the ./i18n.json file and modify it like the below.

{
  "locales": ["ja", "en", "ko"],
  "defaultLocale": "en",
  "localeDetection": false,
  "pages": {
    "*": ["common"]
  }
}

In this blog post, I will provide ja(Japanese), en(English) and ko(Korean) as the supported languages. And, the default language is en.

{
  "locales": ["ja", "en", "ko"],
  "defaultLocale": "en",
  ...
}

To prevent Next.js detect the browser language to decide the language, I set false to localeDetection.

{
  ...
  "localeDetection": false,
  ...
}

We can make a language set for all pages and for specific pages separately with next-translate.

{
  ...
  "pages": {
    "*": ["common"]
  }
}

In this blog post, I will make a language set named common for all pages(*).

Language files

Next, let’s create language files for the localization. Create ./locales/en/common.json file and modify it like the below.

{
  "Japanese": "Japanese",
  "English": "English",
  "Korean": "Korean"
}

And, create the ./locales/ja/common.json file and modify it like the below.

{
  "Japanese": "日本語",
  "English": "英語",
  "Korean": "韓国語"
}

Lastly, create the ./locales/ko/common.json file and modify it like the below.

{
  "Japanese": "일본어",
  "English": "영어",
  "Korean": "한국어"
}

Support localization in Next.js

Let’s see how to use next-translate on the Next.js project to support the localization. Open the ./pages/index.tsx file and modify it like the below.

...
import useTranslation from 'next-translate/useTranslation';

const Home: NextPage = () => {
  const { t } = useTranslation();

  return (
    <div className={styles.container}>
      ...
      <main className={styles.main}>
        ...
        <h2>{t('common:Japanese')}</h2>
        <h2>{t('common:English')}</h2>
        <h2>{t('common:Korean')}</h2>
        ...
      </main>
      ...
    </div>
  );
};

We can provide the localization by the t function in the useTranslation hook of the next-translate package.

t('common:Japanese')

When you use the t function, you can specify the word(Japanese) in the specific language file(common).

Check localization

To check next-translate works well on the Next.js, execute the following command to start the Next.js project.

npm run dev

After starting, you can open the http://localhost:3000 URL in the browser and you can see the en language is displayed well.

next-translate supports English

To check the other languages, when you open the http://localhost:3000/ja URL in the browser, you can see the ja language is displayed well.

next-translate supports Japanese

Also, when you open the http://localhost:3000/ko URL in the browser, you can see the ko language is displayed well.

next-translate upports Korean

Test

Let’s see how to test the Next.js project with next-translate. If you want to know how to configure the test environment, see the previous blog post.

The code on the previous blog post is like the below.

import { render, screen } from '@testing-library/react';
import Home from '../../pages/index';

describe('Home', () => {
  it('renders a heading', () => {
    const { container } = render(<Home />);

    const heading = screen.getByRole('heading', {
      name: /welcome to next\.js!/i,
    });

    expect(heading).toBeInTheDocument();

    expect(container).toMatchSnapshot();
  });
});

You can execute the code by the following command.

npm run test

After testing, you can see the snapshot test result on the ./test/index/__snapshots__/index.test.tsx.snap file. When you open the file, you can see the language is not displayed well like the below.

<h2>
  common:Japanese
</h2>
<h2>
  common:English
</h2>
<h2>
  common:Korean
</h2>

To change the language to the specific language, you need to use I18nProvider and the specific language file.


...
import commonEN from '../../locales/en/common.json';
import I18nProvider from 'next-translate/I18nProvider';

describe('Home', () => {
  it('renders a heading', () => {
    const { container } = render(
      <I18nProvider lang="en" namespaces={{ common: commonEN }}>
        <Home />
      </I18nProvider>
    );
    ...
  });
});

After updating the snapshot test and opening the snapshot result file(./test/index/__snapshots__/index.test.tsx.snap) again, you can see the language is displayed well like the below.

<h2>
  Japanese
</h2>
<h2>
  English
</h2>
<h2>
  Korean
</h2>

Complated

Done! we’ve seen how to use next-translate for the localization in the Next.js project based on the TypeScript. Also, we’ve seen how to make a test code for next-translate in the Next.js project by Jest.

Was my blog helpful? Please leave a comment at the bottom. it will be a great help to me!

Posts