Internasionalisasi

Tambahkan dukungan multi-bahasa ke aplikasimu. Gunakan Proyecta Content API untuk lokalisasi konten editorial, atau minta AI untuk mengonfigurasi framework i18n langsung di kode.

Proyecta mendukung dua pendekatan yang saling melengkapi untuk menginternasionalisasi aplikasi yang kamu bangun:

1. Lokalisasi konten via Proyecta Content API — untuk konten editorial (posting blog, FAQ, teks pemasaran) yang perlu diterjemahkan ke berbagai bahasa
2. i18n di level kode via framework terjemahan — untuk string UI, tanggal, mata uang, dan pergantian locale saat runtime

Keduanya bisa digunakan sekarang. Mana yang kamu butuhkan bergantung pada apa yang ingin diterjemahkan.

Proyecta sebagai builder hadir dengan 24 locale, sehingga produknya sudah fasih dalam i18n. Pola yang sama berlaku untuk aplikasi yang kamu bangun di dalamnya.

Opsi 1: Lokalisasi konten (Proyecta Content API)

Jika kamu membangun situs yang kontennya berat — blog, basis pengetahuan, halaman pemasaran, katalog produk — gunakan dukungan locale bawaan. Beri tahu AI bahasa apa saja yang kamu dukung ("Make the site available in English, Spanish and French") dan AI akan mendaftarkannya untukmu, dengan bahasa Inggris sebagai default. Lalu baca kontenmu kembali dalam bahasa pengunjung.

Di sisi frontend, hook konten bertipe dari template akan me-resolve field yang sudah dilokalisasi untukmu — berikan locale aktif pengunjung dan setiap field localized akan dikembalikan sebagai satu nilai yang sudah diterjemahkan:

import { useCollection, useEntry } from '@/hooks/useContent';
import { useTranslation } from 'react-i18next';

function Blog({ slug }: { slug: string }) {
    const { i18n } = useTranslation();

    // List a collection in the current locale
    const { data: posts } = useCollection('posts', { locale: i18n.language });

    // Or read one entry by slug in the current locale
    const { data: post } = useEntry('posts', slug, { locale: i18n.language });

    // ...render posts / post
}

Di balik layar, CMS akan menelusuri rantai fallback — locale yang diminta → fallback yang dikonfigurasi → locale default — dan melaporkan kode yang benar-benar digunakan pada setiap entri sebagai localeResolved. Hilangkan locale pada situs satu bahasa dan field akan dikembalikan sebagai nilai mentah.

Ini adalah pilihan yang tepat ketika:

• Editor yang tidak menulis kode perlu menerjemahkan konten
• Kamu ingin terjemahan dapat di-versioning
• Kamu membutuhkan penerbitan khusus per locale (penerbitan terjadwal akan segera hadir — entri saat ini memerlukan publish manual via API)

Lihat Manajemen Konten untuk Content API lengkapnya.

Opsi 2: Framework i18n di level kode

Untuk string UI — label, tombol, pesan error, tanggal, mata uang — minta AI untuk mengonfigurasi framework i18n langsung ke proyekmu:

Add internationalization to my app.
Support English, Spanish, French, and Arabic.
Add message catalogs in src/locales/.
Add a language switcher in the header.
Use locale-prefixed URLs like /en/about and /es/about.
Make sure RTL layout works correctly for Arabic.

AI akan:

1. Memilih framework — AI menggunakan i18next dengan react-i18next (standar Proyecta)
2. Membuat file katalog di src/locales/ (satu JSON per bahasa)
3. Membungkus teks dalam pemanggilan t() (dari hook useTranslation milik react-i18next)
4. Menambahkan komponen pemilih bahasa
5. Mengonfigurasi routing URL dengan prefix locale
6. Menangani layout RTL (dir="rtl") untuk bahasa Arab, Ibrani, dan lainnya
7. Memformat angka, tanggal, dan mata uang sesuai locale

Terjemahkan otomatis dengan AI

Setelah bahasa dasar sudah siap, AI sangat andal dalam menghasilkan file katalog untuk bahasa lainnya:

• "Translate every string in src/locales/en.json into Spanish, French, German, and Japanese. Use natural, idiomatic phrasing — don't translate brand names."
• "My app is fully built in English. Add Spanish translations for everything and an es/ route prefix."

Untuk konten yang sangat penting (teks hukum, medis, keuangan), mintalah penerjemah manusia untuk meninjau hasil keluaran AI sebelum di-deploy.

Menggabungkan kedua pendekatan

Sebagian besar aplikasi nyata menggunakan keduanya: i18n di level kode untuk elemen UI umum (tombol, error, navigasi), dan Content API untuk konten editorial (artikel, deskripsi produk). Keduanya dapat berdampingan dengan rapi — framework i18n-mu menangani file katalog saat build time, sedangkan Content API menyajikan entri yang sudah dilokalisasi saat runtime.

Praktik terbaik

1. Tentukan bahasa dasarmu dan finalisasi teks terlebih dahulu. Menerjemahkan target yang terus berubah sangat melelahkan.
2. Terjemahkan secara batch. Jangan menerjemahkan sambil jalan — tunggu hingga sebuah fitur sudah stabil.
3. Uji RTL sejak awal jika kamu mendukung bahasa Arab atau Ibrani. Bug RTL tidak terlihat sampai kamu benar-benar memeriksanya.
4. Sertakan lang dan dir pada <html>. Browser dan screen reader bergantung pada atribut ini.
5. Gunakan Intl untuk pemformatan. Jangan membuat format tanggal atau mata uang sendiri secara manual — gunakan Intl.DateTimeFormat, Intl.NumberFormat.

Segera hadir

• UI manajemen locale di dalam builder — pilih locale, lihat cakupan terjemahan, dan edit katalog tanpa meninggalkan Proyecta
• Terjemahkan otomatis saat disimpan untuk string baru
• Template proyek siap i18n dengan framework yang sudah dikonfigurasi sebelumnya