Cara mengimplementasikan internasionalisasi dalam aplikasi Next.js yang menggunakan App Router
Buat aplikasi React Anda lebih mudah diakses dan jangkau pasar baru dengan internasionalisasi (i18n).
Seiring dunia menjadi semakin global, 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 artikel ini, kami akan menjelajahi cara menambahkan internasionalisasi ke aplikasi React Next.js Anda, dengan server side rendering. TL;DR: Lihat contoh lengkap di sini.
Panduan ini untuk aplikasi Next.js yang menggunakan App Router.
Jika Anda menggunakan Pages Router, lihat panduan ini sebagai gantinya.
Langkah 1: Instal pustaka i18n
Untuk mengimplementasikan internasionalisasi di aplikasi Next.js Anda, pertama-tama kita akan memilih 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 mutakhir, dan membebaskan Anda dari pengelolaan file JSON yang melelahkan.
Mari kita instal menggunakan npm di terminal Anda:
npm install tacotranslate
Langkah 2: Buat akun TacoTranslate gratis
Sekarang setelah Anda memasang modulnya, saatnya untuk membuat akun TacoTranslate Anda, sebuah proyek terjemahan, dan kunci API terkait. Buat akun di sini. Ini gratis, dan tidak mengharuskan Anda menambahkan kartu kredit.
Dalam antarmuka aplikasi TacoTranslate, buatlah sebuah proyek, dan buka tab API keys-nya. Buat satu kunci read
dan satu kunci read/write
. Kita akan menyimpannya sebagai variabel lingkungan. Kunci read
adalah yang kita sebut sebagai 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 sisi klien.
Kita juga akan menambahkan dua variabel lingkungan lagi: TACOTRANSLATE_DEFAULT_LOCALE
dan TACOTRANSLATE_ORIGIN
.
TACOTRANSLATE_DEFAULT_LOCALE
: Kode lokal default fallback. Dalam contoh ini, kami akan mengatur keen
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
Untuk mengintegrasikan TacoTranslate dengan aplikasi Anda, Anda perlu membuat client menggunakan API key yang telah 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_IS_PRODUCTION === 'true'
? process.env.TACOTRANSLATE_PROJECT_LOCALE
: undefined,
});
module.exports = tacoTranslate;
Kami akan secara otomatis mendefinisikan TACOTRANSLATE_API_KEY
dan TACOTRANSLATE_PROJECT_LOCALE
dalam waktu dekat.
Membuat client di file terpisah memudahkan penggunaan kembali nanti. getLocales
hanyalah sebuah fungsi utilitas dengan beberapa penanganan error bawaan. Sekarang, buat file bernama /app/[locale]/tacotranslate.tsx
, dimana kita akan mengimplementasikan provider TacoTranslate
.
'use client';
import React, {type ReactNode} from 'react';
import {
type TranslationContextProperties,
TacoTranslate as ImportedTacoTranslate,
} from 'tacotranslate/react';
import tacoTranslateClient from '@/tacotranslate-client';
export default function TacoTranslate({
locale,
origin,
localizations,
children,
}: TranslationContextProperties & {
readonly children: ReactNode;
}) {
return (
<ImportedTacoTranslate
client={tacoTranslateClient}
locale={locale}
origin={origin}
localizations={localizations}
>
{children}
</ImportedTacoTranslate>
);
}
Perhatikan 'use client';
yang menunjukkan bahwa ini adalah komponen klien.
Dengan penyedia konteks yang sekarang sudah siap, buat file bernama /app/[locale]/layout.tsx
, layout root dalam aplikasi kami. Perhatikan bahwa jalur ini memiliki folder yang menggunakan Dynamic Routes, di mana [locale]
adalah parameter dinamis.
import React, {type ReactNode} from 'react';
import {type Locale, isRightToLeftLocaleCode} from 'tacotranslate';
import './global.css';
import tacoTranslateClient from '@/tacotranslate-client';
import TacoTranslate from './tacotranslate';
export async function generateStaticParams() {
const locales = await tacoTranslateClient.getLocales();
return locales.map((locale) => ({locale}));
}
type RootLayoutParameters = {
readonly params: Promise<{locale: Locale}>;
readonly children: ReactNode;
};
export default async function RootLayout({params, children}: RootLayoutParameters) {
const {locale} = await params;
const origin = process.env.TACOTRANSLATE_ORIGIN;
const localizations = await tacoTranslateClient.getLocalizations({
locale,
origins: [origin /* , other origins to fetch */],
});
return (
<html lang={locale} dir={isRightToLeftLocaleCode(locale) ? 'rtl' : 'ltr'}>
<body>
<TacoTranslate
locale={locale}
origin={origin}
localizations={localizations}
>
{children}
</TacoTranslate>
</body>
</html>
);
}
Hal pertama yang perlu diperhatikan di sini adalah bahwa kita menggunakan parameter Dynamic Route
[locale]
untuk mengambil terjemahan untuk bahasa tersebut. Selain itu, generateStaticParams
memastikan semua kode locale yang telah Anda aktifkan untuk proyek Anda telah diprerender.
Sekarang, mari kita buat halaman pertama kita! Buat file bernama /app/[locale]/page.tsx
.
import React from 'react';
import {Translate} from 'tacotranslate/react';
export const revalidate = 60;
export default async function Page() {
return (
<Translate string="Hello, world!" />
);
}
Perhatikan variabel revalidate
yang memberi tahu Next.js untuk membangun ulang halaman setelah 60 detik, dan menjaga terjemahan Anda agar tetap terbaru.
Langkah 4: Menerapkan rendering sisi server
TacoTranslate mendukung server side rendering. Ini sangat meningkatkan pengalaman pengguna dengan menampilkan konten yang sudah diterjemahkan secara langsung, alih-alih menampilkan konten yang belum diterjemahkan terlebih dahulu. Selain itu, kita dapat melewati permintaan jaringan pada sisi klien, karena kita sudah memiliki terjemahan yang dibutuhkan untuk halaman yang sedang dilihat pengguna.
Untuk mengatur server side rendering, buat atau ubah /next.config.js
:
const withTacoTranslate = require('tacotranslate/next/config').default;
const tacoTranslateClient = require('./tacotranslate-client');
module.exports = async () => {
const config = await withTacoTranslate(
{},
{
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'),
}
);
// NOTE: Remove i18n from config when using the app router
return {...config, i18n: undefined};
};
Modifikasi pengecekan isProduction
agar sesuai dengan pengaturan Anda. Jika true
, TacoTranslate akan menampilkan API key publik. Jika kita berada di lingkungan lokal, pengujian, atau staging (isProduction
is false
), kita akan menggunakan API key rahasia read/write
untuk memastikan string baru dikirim untuk diterjemahkan.
Untuk memastikan routing dan pengalihan berfungsi sebagaimana mestinya, kita perlu membuat file bernama /middleware.ts
. Dengan menggunakan Middleware, kita dapat mengalihkan pengguna ke halaman yang ditampilkan dalam bahasa pilihan mereka.
import {type NextRequest} from 'next/server';
import {middleware as tacoTranslateMiddleware} from 'tacotranslate/next';
import tacoTranslate from '@/tacotranslate-client';
export const config = {
matcher: ['/((?!api|_next|favicon.ico).*)'],
};
export async function middleware(request: NextRequest) {
return tacoTranslateMiddleware(tacoTranslate, request);
}
Pastikan untuk mengatur matcher
sesuai dengan dokumentasi Next.js Middleware.
Di sisi klien, Anda dapat mengubah locale
cookie untuk mengubah bahasa yang dipilih pengguna. Silakan lihat kode contoh lengkap untuk ide tentang cara melakukannya!
Langkah 5: Deploy dan uji!
Kita sudah selesai! Aplikasi React 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 API key yang dapat membuat string baru untuk diterjemahkan. Kami menyarankan untuk memiliki lingkungan staging yang tertutup dan aman di mana Anda dapat menguji aplikasi produksi Anda dengan API key seperti itu, menambahkan string baru sebelum tampil secara live. Ini akan mencegah siapapun mencuri API key rahasia Anda, dan berpotensi membengkakkan proyek terjemahan Anda 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 Pages 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!