Cara mengimplementasikan internasionalisasi dalam aplikasi Next.js yang menggunakan Pages Router

Seiring dunia menjadi semakin terglobalisasi, menjadi 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 dengan berbagai bahasa, mata uang, dan format tanggal.

Dalam tutorial ini, kami akan menjelajahi cara menambahkan internasionalisasi ke aplikasi React Next.js Anda, dengan rendering sisi server. TL;DR: Lihat contoh lengkap di sini.

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

Langkah 1: Instal sebuah pustaka i18n

Untuk menerapkan internasionalisasi di aplikasi Next.js Anda, kita akan terlebih dahulu memilih pustaka i18n. Ada beberapa pustaka populer, termasuk next-intl. Namun, dalam contoh ini, kita akan menggunakan TacoTranslate.

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

Mari instal menggunakan npm di terminal Anda:

npm install tacotranslate

Langkah 2: Buat akun TacoTranslate gratis

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

Di dalam antarmuka aplikasi TacoTranslate, buat sebuah proyek, lalu buka tab kunci API-nya. Buat satu kunci read dan satu kunci read/write. Kita akan menyimpannya sebagai variabel lingkungan. Kunci read adalah 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.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Kode locale default untuk fallback. Dalam contoh ini, kita akan mengaturnya ke en untuk bahasa Inggris.
• TACOTRANSLATE_ORIGIN: “folder” tempat string Anda akan disimpan, seperti URL situs web Anda. Baca selengkapnya tentang origins di sini.

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

Step 3: Menyiapkan TacoTranslate

Untuk mengintegrasikan TacoTranslate dengan aplikasi Anda, Anda perlu membuat klien yang menggunakan kunci API yang dibuat sebelumnya. Misalnya, buat 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 secara otomatis mendefinisikan TACOTRANSLATE_API_KEY sebentar lagi.

Membuat klien di file terpisah membuatnya lebih mudah digunakan kembali nanti. Sekarang, dengan menggunakan kustom /pages/_app.tsx, 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 kustom pageProps dan _app.tsx, silakan perluas definisi dengan properti dan kode di atas.

Langkah 4: Mengimplementasikan rendering sisi server

TacoTranslate memungkinkan rendering di sisi server untuk terjemahan Anda. Hal ini secara signifikan meningkatkan pengalaman pengguna dengan menampilkan konten yang telah diterjemahkan secara langsung, alih-alih menampilkan kilasan konten yang belum diterjemahkan terlebih dahulu. Selain itu, kita dapat menghindari permintaan jaringan di sisi klien, karena kita sudah memiliki semua terjemahan yang diperlukan.

Kita akan mulai 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'),
	});
};

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

Sejauh ini, kami baru menyiapkan aplikasi Next.js dengan daftar bahasa yang didukung. Langkah selanjutnya adalah mengambil terjemahan untuk semua halaman Anda. Untuk itu, Anda akan menggunakan salah satu getTacoTranslateStaticProps atau getTacoTranslateServerSideProps sesuai 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 mutakhir.

Untuk menggunakan salah satu fungsi di sebuah halaman, misalkan Anda memiliki file 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 string di semua komponen React Anda.

import {Translate} from 'tacotranslate/react';

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

Langkah 5: Terapkan dan uji!

Selesai! Aplikasi React Anda sekarang akan diterjemahkan secara otomatis saat Anda menambahkan string apa pun ke komponen Translate. Perhatikan bahwa hanya lingkungan dengan izin read/write pada kunci API yang akan dapat membuat string baru untuk diterjemahkan. Kami menyarankan untuk 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 siapa pun siapa pun mencuri kunci API rahasia Anda, dan berpotensi membengkakkan proyek terjemahan Anda dengan menambahkan string baru yang tidak terkait.

Jangan lupa untuk melihat contoh lengkap di profil GitHub kami. Di sana, Anda juga akan menemukan contoh cara melakukan ini menggunakan App Router! Jika Anda mengalami masalah, jangan ragu untuk menghubungi kami, dan kami akan dengan senang hati membantu.

TacoTranslate memungkinkan Anda untuk secara otomatis melokalisasi aplikasi React Anda dengan cepat ke dan dari lebih dari 75 bahasa. Mulai hari ini!