Belajar Gatsby - Localization & i18n

#Pendahuluan

Situs yang menjangkau pengguna global butuh lebih dari sekadar menerjemahkan teks: URL, metadata, dan sitemap juga harus disesuaikan per bahasa. Gatsby mendukung ini karena setiap bahasa bisa dirender sebagai halaman statis terpisah.

Episode 11 membahas konsep internationalization di Gatsby, pola multi-language routing, implementasi dengan gatsby-plugin-react-i18next, serta SEO untuk halaman terlokalisasi.

#Konsep Internationalization di Gatsby

#Satu Build, Banyak Bahasa

Strategi paling umum: setiap bahasa punya copy halaman sendiri yang dirender saat build. Gatsby tidak butuh runtime i18n — semua bahasa sudah menjadi file HTML statis. Pendekatan ini cepat dan SEO-friendly karena setiap halaman punya URL permanen.

#Dua Jenis Konten Terjemahan

Ada dua hal yang diterjemahkan:

UI strings: label tombol, menu, dan pesan — biasanya disimpan sebagai file JSON per bahasa.
Konten: body post dan artikel — bisa di-source dari CMS dengan field per bahasa atau dari file Markdown di subfolder bahasa.

#Multi-Language Routing dan Terjemahan Konten

#Pola URL per Bahasa

Struktur URL yang umum: bahasa default di akar (/blog/post), bahasa lain di prefix (/en/blog/post). Pemisahan konten per bahasa bisa dilakukan dengan source plugin yang di-set per bahasa atau memakai field bahasa di frontmatter.

#Terjemahan Konten di Markdown

Untuk konten file, susun folder per bahasa:

Struktur konten multi-bahasa

content/
  id/
    blog/
      post-1.mdx
  en/
    blog/
      post-1.mdx

Query memfilter berdasarkan bahasa, lalu slug tiap bahasa dibangun di gatsby-node.js — bahasa default tanpa prefix, bahasa lain dengan prefix.

#Implementasi dengan gatsby-plugin-react-i18next

#Instalasi dan Konfigurasi

Plugin paling populer untuk i18n UI adalah gatsby-plugin-react-i18next:

Install plugin i18n

npm install gatsby-plugin-react-i18next react-i18next i18next

Konfigurasikan di gatsby-config.js:

Konfigurasi gatsby-plugin-react-i18next

module.exports = {
  plugins: [
    {
      resolve: "gatsby-plugin-react-i18next",
      options: {
        languages: ["id", "en"],
        defaultLanguage: "id",
        redirect: true,
        siteUrl: "https://situs-kalian.com",
      },
    },
  ],
}

Options languages dan defaultLanguage menentukan bahasa yang didukung dan bahasa default. redirect: true otomatis mengarahkan / ke bahasa default saat build.

#Memakai Hook di Komponen

Terjemahan UI disimpan di locales/id/translation.json dan dipakai lewat hook useTranslation:

useTranslation di komponen

import { useTranslation } from "gatsby-plugin-react-i18next"
 
const Navbar = () => {
  const { t, i18n } = useTranslation()
 
  return (
    <nav>
      <button onClick={() => i18n.changeLanguage("en")}>
        {t("beralih-bahasa")}
      </button>
      <span>{t("salam-pembuka")}</span>
    </nav>
  )
}

t("salam-pembuka") mengambil string dari file terjemahan bahasa aktif. Plugin ini juga menangani URL prefixed dan menyediakan prop languages untuk navigasi antar bahasa.

#SEO untuk Halaman Terlokalisasi

#hreflang dan URL Kanonik

Google memakai tag hreflang untuk memahami hubungan antar versi bahasa. Untuk situs statis, tag ini bisa dirender lewat Gatsby Head API:

hreflang di Gatsby Head API

export function Head({ pageContext }) {
  const { language, languages, originalPath } = pageContext
  return (
    <>
      <html lang={language} />
      <link rel="alternate" hrefLang="x-default" href={originalPath} />
      {languages.map((lang) => (
        <link key={lang} rel="alternate" hrefLang={lang} href={`/${lang}${originalPath}`} />
      ))}
    </>
  )
}

hrefLang="en" memberi sinyal bahasa pada Google. Pastikan juga gatsby-plugin-sitemap diubah agar menghasilkan URL per bahasa, sehingga semua versi ter-index dengan benar.

#Tools Alternatif: gatsby-plugin-intl

#Kapan Memakai Plugin Lain

gatsby-plugin-intl adalah alternatif yang lebih sederhana — berbasis react-intl. Kekurangannya, plugin ini kurang aktif dirawat. Pilih gatsby-plugin-react-i18next untuk project baru karena didasarkan pada i18next yang ekosistemnya besar dan mendukung fitur lanjutan seperti pluralisasi dan interpolation.

#Penutup

Episode 11 menuntaskan internationalization: konsep banyak bahasa pada situs statis, pola routing per bahasa, implementasi UI dengan gatsby-plugin-react-i18next, dan SEO halaman terlokalisasi dengan hreflang.

Inti yang harus dibawa pulang:

Setiap bahasa dirender sebagai halaman statis terpisah saat build.
UI strings di file JSON; konten bisa dari CMS atau subfolder per bahasa.
gatsby-plugin-react-i18next menangani routing dan URL prefixed.
useTranslation dipakai untuk mengambil string terjemahan.
Tag hreflang dan sitemap per bahasa wajib untuk SEO.
Preferensi plugin i18n saat ini jatuh pada react-i18next.

Di episode 12 selanjutnya kita masuk fase networking dan security: web security dan best practices — keamanan situs statis, pengamanan third-party scripts, content security policy dan secure headers, serta penanganan data sensitif.