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

Seiring dunia menjadi lebih global, sangat penting bagi pengembang web untuk membangun aplikasi yang dapat melayani pengguna dari berbagai negara dan budaya. Salah satu cara utama untuk mencapai hal ini adalah melalui internasionalisasi (i18n), yang memungkinkan Anda menyesuaikan aplikasi Anda ke 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: Pasang pustaka i18n

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

TacoTranslate secara otomatis menerjemahkan string Anda ke bahasa apa pun menggunakan AI terkini, 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 modulnya, saatnya untuk membuat akun TacoTranslate Anda, sebuah proyek terjemahan, dan kunci API terkait. Buat akun di sini. Ini gratis, dan tidak mengharuskan Anda untuk menambahkan kartu kredit.

Dalam antarmuka aplikasi TacoTranslate, buat sebuah proyek, dan navigasikan ke tab API keys-nya. Buat satu kunci read dan satu kunci read/write. Kami akan menyimpannya sebagai variabel lingkungan (environment variables). Kunci read adalah apa yang kami sebut sebagai public dan kunci read/write adalah secret. Sebagai contoh, Anda bisa menambahkannya ke dalam 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 sisi klien.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Kode locale default 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 lebih lanjut tentang origins di sini.

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

Langkah 3: Menyiapkan TacoTranslate

To integrate TacoTranslate with your application, you’ll need to create a client using the API keys from earlier. For example, create a file named /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 secara otomatis mendefinisikan TACOTRANSLATE_API_KEY.

Membuat client di file terpisah membuatnya lebih mudah digunakan kembali nanti. Sekarang, menggunakan /pages/_app.tsx kustom, kita akan menambahkan provider 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, silakan perpanjang definisinya dengan properti dan kode dari atas.

Langkah 4: Menerapkan server side rendering

TacoTranslate memungkinkan rendering sisi server untuk terjemahan Anda. Ini sangat meningkatkan pengalaman pengguna dengan langsung menampilkan konten yang diterjemahkan, alih-alih menampilkan sekilas konten yang belum diterjemahkan terlebih dahulu. Selain itu, kita dapat melewati permintaan jaringan di sisi klien, karena kita sudah memiliki semua terjemahan yang kita butuhkan.

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.

Hingga saat ini, kami hanya menyiapkan aplikasi Next.js dengan daftar bahasa yang didukung. Hal berikutnya yang akan kami lakukan adalah mengambil terjemahan untuk semua halaman Anda. Untuk melakukannya, Anda akan menggunakan getTacoTranslateStaticProps atau getTacoTranslateServerSideProps berdasarkan kebutuhan Anda.

Fungsi-fungsi ini mengambil tiga argumen: Satu objek Next.js Static Props Context , konfigurasi untuk TacoTranslate, dan properti Next.js opsional. Perhatikan bahwa revalidate pada getTacoTranslateStaticProps diatur ke 60 secara default, sehingga terjemahan Anda tetap mutakhir.

Untuk menggunakan salah satu fungsi dalam halaman, mari kita asumsikan 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 dalam semua komponen React Anda.

import {Translate} from 'tacotranslate/react';

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

Langkah 5: Deploy dan uji!

Kita sudah selesai! Aplikasi React Anda sekarang akan diterjemahkan secara otomatis ketika Anda menambahkan string apa pun ke dalam komponen Translate. Perlu dicatat bahwa hanya lingkungan dengan izin read/write pada API key yang dapat membuat string baru untuk diterjemahkan. Kami menyarankan memiliki lingkungan staging yang tertutup dan aman di mana Anda dapat menguji aplikasi produksi Anda dengan API key seperti itu, menambahkan string baru sebelum diluncurkan. Ini akan mencegah siapa pun mencuri API key rahasia Anda, dan berpotensi membengkakkan proyek terjemahan Anda dengan menambahkan string baru yang tidak terkait.

Pastikan untuk memeriksa contoh lengkap di profil GitHub kami. Di sana, Anda juga akan menemukan contoh cara melakukannya 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 bahasa apa pun. Mulai hari ini!