Solusi terbaik untuk internasionalisasi (i18n) di aplikasi Next.js

Cara kerjanya

Seiring dunia menjadi semakin mengglobal, semakin penting bagi pengembang web untuk membangun aplikasi yang dapat melayani pengguna dari berbagai negara dan budaya. Salah satu cara utama untuk mencapai ini adalah melalui internasionalisasi (i18n), yang memungkinkan Anda menyesuaikan aplikasi Anda ke berbagai bahasa, mata uang, dan format tanggal.

Dalam tutorial ini, kita akan membahas cara menambahkan internasionalisasi ke aplikasi React Next.js Anda, dengan perenderan di sisi server. TL;DR: Lihat contoh lengkapnya di sini.

Panduan ini ditujukan untuk aplikasi Next.js yang menggunakan Pages Router.
Jika Anda menggunakan App Router, silakan lihat panduan ini sebagai gantinya.

Langkah 1: Pasang pustaka i18n

Untuk menerapkan internasionalisasi di aplikasi Next.js Anda, pertama-tama kami akan memilih perpustakaan i18n. Ada beberapa perpustakaan populer, termasuk next-intl. Namun, dalam contoh ini, kami akan menggunakan TacoTranslate.

TacoTranslate secara otomatis menerjemahkan string Anda ke bahasa apa pun menggunakan AI mutakhir, dan membebaskan Anda dari pengelolaan file JSON yang membosankan.

Mari kita instal menggunakan npm di terminal Anda:

npm install tacotranslate

Langkah 2: Buat akun TacoTranslate gratis

Sekarang setelah Anda menginstal modul, saatnya membuat akun TacoTranslate, sebuah proyek terjemahan, dan kunci API terkait. Buat akun di sini. Gratis, dan tidak mengharuskan Anda menambahkan kartu kredit.

Di dalam UI aplikasi TacoTranslate, buat sebuah proyek, dan navigasikan ke tab kunci API‑nya. Buat satu read kunci, dan satu read/write kunci. Kami akan menyimpannya sebagai variabel lingkungan. Kunci read adalah apa yang kami sebut public dan kunci read/write adalah secret. Sebagai contoh, Anda bisa menambahkannya ke file .env di root proyek Anda.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Pastikan untuk tidak pernah membocorkan kunci API rahasia read/write ke lingkungan produksi di sisi klien.

Kami juga akan menambahkan dua variabel lingkungan lagi: TACOTRANSLATE_DEFAULT_LOCALE dan TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Kode lokal default yang digunakan sebagai cadangan. Dalam contoh ini, kami akan mengaturnya ke en untuk Bahasa Inggris.
• TACOTRANSLATE_ORIGIN: “folder” tempat teks Anda akan disimpan, seperti URL situs web Anda. Baca selengkapnya tentang origins di sini.

TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com

Langkah 3: Menyiapkan TacoTranslate

Untuk mengintegrasikan TacoTranslate dengan aplikasi Anda, Anda perlu membuat klien menggunakan kunci API yang dibuat sebelumnya. Misalnya, buat sebuah file bernama /tacotranslate-client.js.

const {default: createTacoTranslateClient} = require('tacotranslate');

const tacoTranslate = createTacoTranslateClient({
	apiKey:
		process.env.TACOTRANSLATE_SECRET_API_KEY ??
		process.env.TACOTRANSLATE_PUBLIC_API_KEY ??
		process.env.TACOTRANSLATE_API_KEY ??
		'',
	projectLocale: process.env.TACOTRANSLATE_DEFAULT_LOCALE ?? '',
});

module.exports = tacoTranslate;

Kami akan segera mendefinisikan TACOTRANSLATE_API_KEY secara otomatis.

Membuat klien di file terpisah membuatnya lebih mudah digunakan kembali nanti. Sekarang, dengan menggunakan /pages/_app.tsx khusus, kita akan menambahkan penyedia TacoTranslate.

import React from 'react';
import {type AppProps} from 'next/app';
import {type Origin, type Locale, type Localizations} from 'tacotranslate';
import TacoTranslate from 'tacotranslate/react';
import TacoTranslateHead from 'tacotranslate/next/head';
import tacoTranslate from '../tacotranslate-client';

type PageProperties = {
	origin: Origin;
	locale: Locale;
	locales: Locale[];
	localizations: Localizations;
};

export default function App({Component, pageProps}: AppProps<PageProperties>) {
	const {origin, locale, locales, localizations} = pageProps;

	return (
		<TacoTranslate
			client={tacoTranslate}
			origin={origin}
			locale={locale}
			localizations={localizations}
		>
			<TacoTranslateHead rootUrl="https://your-website.com" locales={locales} />
			<Component {...pageProps} />
		</TacoTranslate>
	);
}

Jika Anda sudah memiliki pageProps dan _app.tsx khusus, harap perluas definisinya dengan properti dan kode di atas.

Langkah 4: Menerapkan rendering sisi server

TacoTranslate memungkinkan rendering sisi server untuk terjemahan Anda. Hal ini sangat meningkatkan pengalaman pengguna dengan menampilkan konten yang sudah diterjemahkan secara langsung, daripada kilasan konten yang belum diterjemahkan terlebih dahulu. Selain itu, kita dapat melewatkan permintaan jaringan di sisi klien, karena semua terjemahan yang dibutuhkan sudah tersedia.

Kita akan memulai dengan membuat atau memodifikasi /next.config.js.

const withTacoTranslate = require('tacotranslate/next/config').default;
const tacoTranslateClient = require('./tacotranslate-client');

module.exports = async () => {
	const config = {};

	return withTacoTranslate(config, {
		client: tacoTranslateClient,
		isProduction:
			process.env.TACOTRANSLATE_ENV === 'production' ||
			process.env.VERCEL_ENV === 'production' ||
			(!(process.env.TACOTRANSLATE_ENV || process.env.VERCEL_ENV) &&
				process.env.NODE_ENV === 'production'),
	});
};

Sesuaikan pemeriksaan isProduction dengan pengaturan Anda. Jika true, TacoTranslate akan menampilkan kunci API publik. Jika kita berada di lingkungan lokal, pengujian, atau staging (isProduction is false), kita akan menggunakan kunci API rahasia read/write untuk memastikan string baru dikirim untuk diterjemahkan.

Sejauh ini, kita hanya menyiapkan aplikasi Next.js dengan daftar bahasa yang didukung. Langkah berikutnya adalah mengambil terjemahan untuk semua halaman Anda. Untuk melakukan itu, Anda akan menggunakan salah satu getTacoTranslateStaticProps atau getTacoTranslateServerSideProps berdasarkan kebutuhan Anda.

Fungsi-fungsi ini menerima tiga argumen: satu objek Next.js Static Props Context, konfigurasi untuk TacoTranslate, dan properti Next.js opsional. Perhatikan bahwa revalidate pada getTacoTranslateStaticProps disetel ke 60 secara default, sehingga terjemahan Anda tetap up-to-date.

Untuk menggunakan salah satu fungsi di sebuah halaman, anggaplah Anda memiliki berkas halaman seperti /pages/hello-world.tsx.

import {Translate} from 'tacotranslate/react';
import getTacoTranslateStaticProps from 'tacotranslate/next/get-static-props';
import tacoTranslateClient from '../tacotranslate-client';

export async function getStaticProps(context) {
	return getTacoTranslateStaticProps(context, {client: tacoTranslateClient});
}

export default function Page() {
	return <Translate string="Hello, world!"/>;
}

Anda sekarang seharusnya dapat menggunakan komponen Translate untuk menerjemahkan teks di semua komponen React Anda.

import {Translate} from 'tacotranslate/react';

function Component() {
	return <Translate string="Hello, world!"/>
}

Langkah 5: Luncurkan dan uji!

Selesai! Aplikasi Next.js Anda sekarang akan diterjemahkan secara otomatis ketika Anda menambahkan string apa pun ke komponen Translate. Perlu diperhatikan bahwa hanya lingkungan dengan izin read/write pada kunci API yang dapat membuat string baru untuk diterjemahkan. Kami menyarankan agar memiliki lingkungan staging tertutup dan aman di mana Anda dapat menguji aplikasi produksi Anda dengan kunci API seperti itu, menambahkan string baru sebelum diluncurkan. Ini akan mencegah siapapun siapapun mencuri kunci API rahasia Anda, dan berpotensi membuat proyek terjemahan Anda membengkak dengan menambahkan string baru yang tidak terkait.

Be sure to check out the complete example over at our GitHub profile. There, you’ll also find an example of how to do this using the App Router! If you encounter any problems, feel free to reach out, and we’ll be more than happy to help.

TacoTranslate lets you automatically localize your React applications quickly to and from over 75 languages. Get started today!