Impementasi i18n di Next js

Published in

Arunatech

4 min readMay 31, 2023

Terkadang fitur Multibahasa sering diperlukan untuk menjangkau lebih banyak pengunjung pada suatu website, karena memungkinkan para pengunjung untuk mengerti isi konten dari website dengan bahasa yang mereka pahami.

Internationalization atau i18n adalah suatu proses untuk mendesain aplikasi dengan fitur mutibahsa didalamnya. Pada framework Next js, i18n dapat diterapakan dengan menggunakan react-i18next , next-i18next dan i18next.

Di artikel kali ini, kita akan membuat website multibahasa seperti berikut.

Inisiasi

Install react-i18next , next-i18next dan i18next.

yarn add react-i18next next-i18next i18next

// atau

npm i react-i18next next-i18next i18next

Buat file next-i18next.config.js di root directory. Contoh bahasa yang digunakan saat ini adalah en-US (English US) dan id (bahasa Indonesia) dengan bahasa default en-US. code — code bahasa masing masing negara mengikuti aturan di https://www.localeplanet.com/icu/?sort=dialect

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

Panggil i18n config kedalam next.config.js.

/** @type {import('next').NextConfig} */
const { i18n } = require("./next-i18next.config");

const moduleExports = {
  reactStrictMode: true,
  swcMinify: true,
  i18n,
};
module.exports = moduleExports;

Bungkus App component dengan appWithTraslation.

import "../styles/globals.css";
import { appWithTranslation } from "next-i18next";
import type { AppProps } from "next/app";

function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}

export default appWithTranslation(App);

Membuat locale files

Saat ini kita menggunakan terjemahan en-US dan id. Jadi kita buat 2 file common.js sebagai locale file di dalam folder public/locales/{code_bahasa} seperti ini.

berikut isi dari masing — masing common.json

// public/locales/en-US/common.json
{
  "title": "Welcome to Next Js",
  "desc": "react-i18next allows us to create multi language websites"
}

// public/locales/id/common.json
{
  "title": "Selamat datang di Next Js",
  "desc": "react-i18next memungkinkan kita membuat situs web multi bahasa"
}

Memasang i18n di Home page

import Head from "next/head";
import styles from "../styles/Home.module.css";
import { useTranslation } from "next-i18next";
import type { GetStaticProps, InferGetStaticPropsType } from "next";
import { serverSideTranslations } from "next-i18next/serverSideTranslations";

export default function Home(
  _props: InferGetStaticPropsType<typeof getStaticProps>
) {
  const { t } = useTranslation("common");

  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1>{t("title")}</h1>
        <code style={{ fontSize: "18px" }}>
          {t("desc")}
        </code>
      </main>
    </div>
  );
}

export const getStaticProps: GetStaticProps<any> = async ({ locale }) => ({
  props: {
    ...(await serverSideTranslations(locale ?? "en-US", ["common"])),
  },
});

Mari kita bedah satu-satu bagian penting dari potongan kode diatas. Yang pertama adalah hook useTranslation("common") yang berguna untuk mengakses konten terjemahan berdasarkan bahasa terpilih. Parameter “common” mengacu pada nama locales file yang kita buat yaitu common.json.

Yang kedua adalah functionserverSideTranslations(locale_code, [locale_file_names]). Melalui function ini konten terjemahan akan di persiapkan terlebih dahulu pada saat build time (karena menggunakan getStaticProps), sehingga konten terjemahan dapat di konsumsi oleh hook useTranslation("common").

Strategi penyediaan konten terjemahan dapat dilakukan dalam mode SSG ataupun SSR. Jika ada 2 jenis konten terjemahan dalam konfigurasi, maka akan tercipta 2 halaman identik dengan konten terjemahan berbeda dan juga sub-path yang berbeda. Misal /home untuk konten bahasa en-US dan /home/id untuk konten bahasa Indonesia.

Memasang Switch Bahasa untuk User

import Head from "next/head";
import styles from "../styles/Home.module.css";
import { FormEvent } from "react"
import { useRouter } from "next/router";
import { useTranslation } from "next-i18next";
import type { GetStaticProps, InferGetStaticPropsType } from "next";
import { serverSideTranslations } from "next-i18next/serverSideTranslations";

export default function Home(
  _props: InferGetStaticPropsType<typeof getStaticProps>
) {
  const router = useRouter();
  const { t } = useTranslation("common");

  const switchLang = (event: FormEvent<HTMLSelectElement>) => {
    const newLocale = event.currentTarget.value
    const { pathname, asPath, query } = router;

    router.push({ pathname, query }, asPath, { locale: newLocale });
  }

  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1>{t("title")}</h1>
        <code style={{ fontSize: "18px" }}>
          {t("desc")}
        </code>

        <code style={{ marginTop: "30px", fontSize: "16px" }}>translation:

          <select value={router.locale} style={{ marginLeft: "5px", fontSize: "20px" }} onChange={switchLang}>
            {router.locales?.map((e, i) => (
              <option key={i} value={e}>{e}</option>
            ))}
          </select>
        </code>
      </main>
    </div>
  );
}

export const getStaticProps: GetStaticProps<any> = async ({ locale }) => ({
  props: {
    ...(await serverSideTranslations(locale ?? "en-US", ["common"])),
  },
});

Untuk mengakomodir kebutuhan user untuk memilih bahasa, mari kita tambahkan “switch” berbentuk dropdown seperti kode diatas.

Ide utama untuk melakukan swicth multi bahasa ada di baris kode ini

router.push({ pathname, query }, asPath, { locale: newLocale });

variabel newLocale bisa diisi dengan code negara yang sudah di configurasi sebelumnya yaitu en-US dan id.

Kesimpulan

Semoga artikel ini dapat membantu pembaca utuk mengimplemantasi i18n di Next Js.

Terimakasih.