M

MLOG

Bahasa Indonesia

Pelajari cara menerapkan internasionalisasi (i18n) yang mulus di aplikasi Next.js Anda untuk menjangkau audiens global. Mencakup perutean, terjemahan konten, dan praktik terbaik.

Internasionalisasi Next.js: Membangun Aplikasi Multi-bahasa untuk Audiens Global

Di dunia yang saling terhubung saat ini, membangun aplikasi yang melayani audiens global bukan lagi sebuah kemewahan – ini adalah sebuah keharusan. Next.js, sebuah kerangka kerja React yang kuat, menyediakan fitur-fitur tangguh untuk menerapkan internasionalisasi (i18n), memungkinkan Anda membuat aplikasi multi-bahasa yang memberikan pengalaman yang dilokalkan kepada pengguna di seluruh dunia. Panduan komprehensif ini akan memandu Anda melalui konsep-konsep penting, teknik, dan praktik terbaik untuk membangun aplikasi Next.js yang diinternasionalisasi.

Memahami Internasionalisasi dan Lokalisasi

Sebelum mendalami spesifik i18n Next.js, mari kita perjelas istilah-istilah kunci:

Pada dasarnya, i18n mempersiapkan aplikasi Anda untuk lokalisasi. Dengan memisahkan elemen yang bergantung pada bahasa dari kode inti, Anda membuatnya lebih mudah untuk melokalkan aplikasi untuk pasar yang berbeda.

Mengapa Menerapkan Internasionalisasi di Next.js?

Menerapkan i18n di aplikasi Next.js Anda menawarkan banyak manfaat:

Fitur dan Konfigurasi i18n Next.js

Next.js menawarkan dukungan bawaan untuk i18n melalui fitur perutean dan manajemen kontennya. Berikut adalah rincian fitur-fitur penting:

1. Mengonfigurasi i18n di next.config.js

Konfigurasi inti untuk i18n berada di dalam file next.config.js. Berikut contohnya:


/** @type {import('next').NextConfig} */
const nextConfig = {
  i18n: {
    locales: ['en', 'es', 'fr'], // Array berisi lokal (kode bahasa) yang didukung
    defaultLocale: 'en', // Lokal default yang akan digunakan
    localeDetection: true, // Mengaktifkan/menonaktifkan deteksi lokal otomatis berdasarkan pengaturan browser (opsional)
    //  domains: [
    //  {
    //    domain: 'example.com',
    //    defaultLocale: 'en',
    //  },
    //  {
    //    domain: 'example.es',
    //    defaultLocale: 'es',
    //  },
    //  ],
  },
}

module.exports = nextConfig;

Penjelasan:

2. Perutean dengan Awalan Lokal

Next.js secara otomatis menambahkan awalan pada rute dengan lokal. Misalnya, jika Anda memiliki halaman di /about dan lokalnya adalah 'es' (Spanyol), URL akan menjadi /es/about. Ini memungkinkan versi bahasa yang berbeda dari halaman dan memungkinkan mesin pencari untuk mengindeks konten untuk setiap lokal. Kerangka kerja ini menangani pengalihan dan perutean untuk Anda.

3. Memanfaatkan Hook useRouter

Hook useRouter dari next/router menyediakan akses ke lokal saat ini dan informasi perutean lainnya.


import { useRouter } from 'next/router';

function MyComponent() {
  const router = useRouter();
  const { locale, locales, defaultLocale } = router;

  return (
    

      
Lokal saat ini: {locale}

      
Lokal yang tersedia: {locales.join(', ')}

      
Lokal default: {defaultLocale}

    

  );
}

export default MyComponent;

Objek router menawarkan properti kunci berikut:

Strategi Terjemahan Konten

Setelah Anda mengonfigurasi aplikasi Next.js Anda untuk i18n, Anda perlu menerapkan strategi untuk menerjemahkan konten Anda. Berikut adalah beberapa pendekatan populer:

1. Menggunakan Sistem Manajemen Terjemahan (TMS) Khusus

Untuk proyek skala besar dengan banyak bahasa, TMS sangat disarankan. Opsi populer meliputi:

Manfaat:

2. Membuat File Terjemahan JSON

Untuk proyek yang lebih kecil, menggunakan file JSON untuk menyimpan terjemahan adalah metode yang sederhana dan efektif.

Contoh Struktur Direktori:


/src
├── locales
│   ├── en.json
│   └── es.json
├── components
│   └── MyComponent.js
└── pages
    └── index.js

Contoh en.json:


{
  "greeting": "Hello, world!",
  "welcomeMessage": "Welcome to our website."
}

Contoh es.json:


{
  "greeting": "¡Hola, mundo!",
  "welcomeMessage": "Bienvenido a nuestro sitio web."
}

Contoh MyComponent.js:


import { useRouter } from 'next/router';
import en from '../locales/en.json';
import es from '../locales/es.json';

function MyComponent() {
  const { locale } = useRouter();
  const t = locale === 'es' ? es : en;

  return (
    

      
{t.greeting}

      
{t.welcomeMessage}

    

  );
}

export default MyComponent;

Pendekatan ini memberikan fleksibilitas dan mudah untuk proyek yang lebih kecil. Umumnya mudah untuk diperbarui dan dipelihara.

3. Menggunakan Pustaka Terjemahan

Beberapa pustaka JavaScript menyederhanakan terjemahan konten dalam komponen React Anda.

Contoh dengan next-i18next (Instalasi: npm install next-i18next i18next react-i18next):

Buat file konfigurasi i18n (misalnya, i18n.js di direktori root Anda):


// i18n.js
import { createServerSideHelpers } from 'next-i18next'
import { i18n } from './next-i18next.config'

export function initI18next(req, res, namespaces = ['common']) {
  const helpers = createServerSideHelpers(
    req, 
    res, 
    i18n, 
    namespaces
  )

  return helpers
}

export { appWithTranslation } from 'next-i18next'
export { i18n }

Buat konfigurasi Next.js Anda untuk next-i18next.


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

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  i18n: {
    defaultLocale: 'en',
    locales: ['en', 'es', 'fr'],
  },
  // konfigurasi lainnya
}

module.exports = nextConfig

Tambahkan konfigurasi dan impor terjemahan ke _app.js Anda:


import { appWithTranslation } from 'next-i18next';
import '../styles/globals.css';

function MyApp({ Component, pageProps }) {
  return ;
}

export default appWithTranslation(MyApp);

Buat folder dan isi dengan lokal untuk terjemahan Anda.


/public
└── locales
    ├── en
    │   └── common.json
    ├── es
    │   └── common.json
    └── fr
        └── common.json

Contoh en/common.json:


{
  "greeting": "Hello, world!",
  "welcomeMessage": "Welcome to our website."
}

Menggunakan terjemahan dalam sebuah komponen:


import { useTranslation } from 'next-i18next';

function MyComponent() {
  const { t } = useTranslation('common');

  return (
    

      
{t('greeting')}

      
{t('welcomeMessage')}

    

  );
}

export default MyComponent;

Contoh ini menggunakan hook useTranslation untuk mengambil terjemahan berdasarkan lokal saat ini.

Menangani Rute Dinamis dan Static Site Generation (SSG)

Internasionalisasi menjadi lebih kompleks ketika berhadapan dengan rute dinamis (misalnya, postingan blog, halaman produk) dan static site generation (SSG).

1. Rute Dinamis (misalnya, /blog/[slug])

Untuk rute dinamis, Anda perlu menghasilkan path yang benar untuk setiap lokal saat waktu build menggunakan getStaticPaths. Fungsi ini mengembalikan sebuah array path yang harus di-pre-render oleh Next.js.


export async function getStaticPaths() {
  const paths = [];
  const locales = ['en', 'es', 'fr'];
  const posts = await fetchPosts(); // Ambil data postingan blog

  posts.forEach(post => {
    locales.forEach(locale => {
      paths.push({
        params: {
          slug: post.slug,
        },
        locale,
      });
    });
  });

  return {
    paths,
    fallback: false, // atau 'blocking' jika Anda ingin menampilkan status pemuatan
  };
}

export async function getStaticProps({ params, locale }) {
  const post = await getPostBySlug(params.slug, locale);

  return {
    props: {
      post,
    },
  };
}

Penjelasan:

2. Static Site Generation (SSG) dengan getStaticProps

Di getStaticProps, Anda dapat mengambil konten yang diterjemahkan berdasarkan parameter locale.


export async function getStaticProps({ params, locale }) {
  // Ambil konten berdasarkan lokal dan params
  const { post } = await getPostBySlug(params.slug, locale);

  return {
    props: {
      post,
    },
  };
}

Fungsi getPostBySlug harus mengambil konten yang diterjemahkan untuk slug dan lokal yang diberikan, yang dapat diambil dari file terjemahan Anda, database, atau CMS.

3. Server-Side Rendering (SSR) dengan getServerSideProps

Untuk konten yang perlu diambil pada saat permintaan, gunakan getServerSideProps. Ini berguna jika konten sering berubah atau dipersonalisasi untuk setiap pengguna.


export async function getServerSideProps({ params, locale, req, res }) {
  // Ambil data berdasarkan lokal dan params (misalnya, dari database)
  const data = await fetchData(params.slug, locale);

  return {
    props: {
      data,
    },
  };
}

Praktik Terbaik untuk Internasionalisasi Next.js

Mengikuti praktik terbaik ini akan membantu Anda membangun aplikasi multi-bahasa yang tangguh, mudah dipelihara, dan ramah pengguna:

Pertimbangan SEO untuk Situs Web yang Diinternasionalisasi

Mengoptimalkan situs web Anda yang diinternasionalisasi untuk mesin pencari sangat penting untuk mendorong lalu lintas organik dari seluruh dunia. Berikut adalah beberapa praktik terbaik SEO utama:

Contoh: Membangun Blog Multi-bahasa Sederhana

Mari kita buat contoh sederhana dari sebuah blog multi-bahasa menggunakan Next.js. Ini akan memberikan ilustrasi yang lebih konkret tentang bagaimana menerapkan konsep-konsep yang telah dibahas di atas.

1. Pengaturan Proyek

Buat proyek Next.js baru:


npx create-next-app my-multi-lang-blog
cd my-multi-lang-blog

2. Konfigurasi i18n (next.config.js)


/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  i18n: {
    locales: ['en', 'es', 'fr'],
    defaultLocale: 'en',
  },
}

module.exports = nextConfig

3. Buat File Terjemahan

Buat folder locales di direktori root dan tambahkan file JSON berikut:

locales/en.json:


{
  "title": "Welcome to My Blog",
  "postTitle": "My First Post",
  "postContent": "This is the content of my first blog post."
}

locales/es.json:


{
  "title": "Bienvenido a mi Blog",
  "postTitle": "Mi Primer Post",
  "postContent": "Este es el contenido de mi primer publicación de blog."
}

locales/fr.json:


{
  "title": "Bienvenue sur Mon Blog",
  "postTitle": "Mon Premier Article",
  "postContent": "Ceci est le contenu de mon premier article de blog."
}

4. Buat Komponen Postingan Blog (misalnya, components/BlogPost.js)


import { useRouter } from 'next/router';
import en from '../locales/en.json';
import es from '../locales/es.json';
import fr from '../locales/fr.json';

function BlogPost() {
  const router = useRouter();
  const { locale } = router;

  let translations;
  switch (locale) {
    case 'es':
      translations = es;
      break;
    case 'fr':
      translations = fr;
      break;
    default:
      translations = en;
  }

  return (
    

      
{translations.postTitle}

      
{translations.postContent}

    

  );
}

export default BlogPost;

5. Buat Halaman Indeks (pages/index.js)


import { useRouter } from 'next/router';
import BlogPost from '../components/BlogPost';
import en from '../locales/en.json';
import es from '../locales/es.json';
import fr from '../locales/fr.json';

function HomePage() {
  const router = useRouter();
  const { locale, locales } = router;

  let translations;
  switch (locale) {
    case 'es':
      translations = es;
      break;
    case 'fr':
      translations = fr;
      break;
    default:
      translations = en;
  }

  return (
    

      
{translations.title}

      
      

        {locales.map((l) => (
          
            {l.toUpperCase()}
          
        ))}
      

    

  );
}

export default HomePage;

Contoh yang disederhanakan ini menunjukkan prinsip-prinsip dasar internasionalisasi Next.js. Anda dapat mengembangkan kerangka dasar ini untuk menyertakan fitur yang lebih kompleks, seperti rute dinamis dan integrasi dengan sistem manajemen terjemahan. Pertimbangkan untuk meningkatkan tautan di atas dengan komponen Link dan menambahkan atribut locale yang sesuai.

6. Jalankan Aplikasi

Jalankan aplikasi dengan:


npm run dev

Sekarang Anda dapat mengakses blog Anda di http://localhost:3000 (Inggris), http://localhost:3000/es (Spanyol), dan http://localhost:3000/fr (Prancis). Anda akan melihat judul dan konten postingan blog diterjemahkan berdasarkan lokal yang dipilih.

Kesimpulan

Next.js menyediakan serangkaian fitur yang komprehensif untuk menerapkan internasionalisasi di aplikasi web Anda. Dengan mengikuti prinsip dan teknik yang diuraikan dalam panduan ini, Anda dapat membuat aplikasi multi-bahasa yang memberikan pengalaman yang dilokalkan kepada pengguna di seluruh dunia. Ingatlah untuk merencanakan strategi i18n Anda sejak dini, pilih metode terjemahan yang tepat untuk kebutuhan Anda, dan prioritaskan pengalaman pengguna. Dengan perencanaan dan eksekusi yang cermat, Anda dapat membangun aplikasi yang beresonansi dengan audiens global dan membuka peluang baru untuk pertumbuhan. Pembelajaran berkelanjutan, mengikuti rilis terbaru dan praktik terbaik akan memastikan bahwa Anda memanfaatkan alat dan teknologi Anda secara efektif.

Seiring kemajuan teknologi, harapkan untuk melihat lebih banyak fitur i18n canggih muncul. Kemampuan untuk menjangkau pengguna di berbagai budaya dan kelompok linguistik akan tetap menjadi prioritas utama bagi pengembang aplikasi di seluruh dunia. Oleh karena itu, menguasai dasar-dasar i18n adalah keterampilan berharga yang akan meningkatkan nilai Anda di lanskap pengembangan global saat ini.