Solusi terbaik untuk internasionalisasi (i18n) dalam aplikasi Next.js
Apakah Anda ingin memperluas aplikasi Next.js Anda ke pasar baru? TacoTranslate membuatnya sangat mudah untuk melokalkan proyek Next.js Anda, memungkinkan Anda menjangkau audiens global tanpa kesulitan.
Mengapa memilih TacoTranslate untuk Next.js?
- Integrasi Tanpa Hambatan: Dirancang khusus untuk aplikasi Next.js, TacoTranslate terintegrasi dengan mudah ke dalam alur kerja Anda yang sudah ada.
- Koleksi String Otomatis: Tidak perlu lagi mengelola file JSON secara manual. TacoTranslate secara otomatis mengumpulkan string dari kode basis Anda.
- Terjemahan Berbasis AI: Manfaatkan kekuatan AI untuk menyediakan terjemahan yang akurat secara kontekstual yang sesuai dengan nada aplikasi Anda.
- Dukungan Bahasa Instan: Tambahkan dukungan untuk bahasa baru hanya dengan satu klik, menjadikan aplikasi Anda dapat diakses secara global.
Cara kerjanya
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 ke berbagai bahasa, mata uang, dan format tanggal.
Dalam tutorial ini, kita akan mengeksplorasi cara menambahkan internasionalisasi ke aplikasi React Next.js Anda, dengan rendering 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.
Langkah 1: Pasang perpustakaan i18n
Untuk menerapkan internasionalisasi dalam aplikasi Next.js Anda, pertama-tama kita akan 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 canggih, dan membebaskan Anda dari pengelolaan file JSON yang melelahkan.
Mari instal menggunakan npm di terminal Anda:
npm install tacotranslate
Langkah 2: Buat akun TacoTranslate gratis
Sekarang setelah Anda menginstal modul, 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, buat sebuah proyek, dan navigasikan ke tab API keys. Buat satu kunci read
dan satu kunci read/write
. Kami akan menyimpannya sebagai variabel lingkungan. 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 fallback default. Dalam contoh ini, kita akan mengaturnya keen
untuk Bahasa Inggris.TACOTRANSLATE_ORIGIN
: "Folder" tempat string Anda akan disimpan, seperti URL situs web Anda. Baca lebih lanjut tentang origin di sini.
TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com
Langkah 3: Mengatur TacoTranslate
Untuk mengintegrasikan TacoTranslate dengan aplikasi Anda, Anda perlu membuat client menggunakan kunci API dari sebelumnya. Sebagai contoh, 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;
Kita akan secara otomatis mendefinisikan TACOTRANSLATE_API_KEY
dalam waktu dekat.
Membuat client dalam file terpisah membuatnya lebih mudah digunakan lagi nanti. Sekarang, menggunakan /pages/_app.tsx
kustom, 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
kustom, silakan perpanjang definisi dengan properti dan kode dari atas.
Langkah 4: Mengimplementasikan rendering sisi server
TacoTranslate memungkinkan rendering sisi server untuk terjemahan Anda. Ini sangat meningkatkan pengalaman pengguna dengan menampilkan konten yang sudah diterjemahkan secara langsung, 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 dibutuhkan.
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.
Sampai saat ini, kami hanya mengatur 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 dari 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
diatur ke 60 secara default, sehingga terjemahan Anda tetap terbaru.
Untuk menggunakan salah satu fungsi tersebut dalam sebuah halaman, anggaplah 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 sudah dapat menggunakan komponen Translate
untuk menerjemahkan string dalam semua komponen React Anda.
import {Translate} from 'tacotranslate/react';
function Component() {
return <Translate string="Hello, world!"/>
}
Langkah 5: Deploy dan uji coba!
Kami sudah selesai! Aplikasi Next.js 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 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 diterbitkan. Ini akan mencegah siapa pun mencuri API key rahasia Anda, dan berpotensi membebani 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 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!