Penyelesaian terbaik untuk pengantarabangsaan (i18n) dalam aplikasi Next.js

Bagaimana ia berfungsi

Apabila dunia menjadi lebih global, adalah semakin penting bagi pembangun web untuk membina aplikasi yang dapat memenuhi keperluan pengguna dari pelbagai negara dan budaya. Salah satu cara utama untuk mencapai ini adalah melalui pensuisian antarabangsa (i18n), yang membolehkan anda menyesuaikan aplikasi anda kepada pelbagai bahasa, mata wang, dan format tarikh.

Dalam tutorial ini, kita akan meneroka bagaimana untuk menambah pensuisian antarabangsa kepada aplikasi React Next.js anda, dengan rendering sisi pelayan. TL;DR: Lihat contoh penuh di sini.

Panduan ini adalah untuk aplikasi Next.js yang menggunakan Pages Router.
Jika anda menggunakan App Router, sila lihat panduan ini sebagai gantinya.

Langkah 1: Pasang perpustakaan i18n

Untuk melaksanakan internasionalisasi dalam aplikasi Next.js anda, kita akan memilih perpustakaan i18n terlebih dahulu. Terdapat beberapa perpustakaan popular, termasuk next-intl. Namun, dalam contoh ini, kita akan menggunakan TacoTranslate.

TacoTranslate secara automatik menterjemahkan rentetan anda ke mana-mana bahasa menggunakan AI terkini, dan membebaskan anda daripada urusan pengurusan fail JSON yang membosankan.

Marilah kita pasangkannya menggunakan npm di terminal anda:

npm install tacotranslate

Langkah 2: Cipta akaun TacoTranslate percuma

Sekarang anda telah memasang modul tersebut, tiba masanya untuk mencipta akaun TacoTranslate anda, sebuah projek terjemahan, dan API key yang berkaitan. Cipta akaun di sini. Ia percuma, dan tidak memerlukan anda untuk memasukkan kad kredit.

Dalam antara muka aplikasi TacoTranslate, buat satu projek, dan navigasi ke tab kekunci API-nya. Buat satu kekunci read dan satu kekunci read/write. Kami akan menyimpannya sebagai pembolehubah persekitaran. Kekunci read adalah apa yang kami panggil sebagai public dan kekunci read/write adalah secret. Contohnya, anda boleh menambahkannya ke dalam fail .env di akar projek anda.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Pastikan anda tidak pernah membocorkan kunci API rahsia read/write kepada persekitaran produksi sisi klien.

Kami juga akan menambah dua pembolehubah persekitaran lagi: TACOTRANSLATE_DEFAULT_LOCALE dan TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Kod lokal lalai sebagai sandaran. Dalam contoh ini, kami akan menetapkannya ke en untuk Bahasa Inggeris.
• TACOTRANSLATE_ORIGIN: "Folder" di mana rentetan anda akan disimpan, seperti URL laman web anda. Baca lebih lanjut mengenai origins di sini.

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

Langkah 3: Menyiapkan TacoTranslate

Untuk menyepadukan TacoTranslate dengan aplikasi anda, anda perlu membuat klien menggunakan kunci API dari sebelumnya. Contohnya, cipta fail 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 automatik mentakrifkan TACOTRANSLATE_API_KEY sebentar lagi.

Membuat client dalam fail berasingan menjadikannya lebih mudah untuk digunakan semula kemudian. Kini, menggunakan /pages/_app.tsx khusus, kita akan menambah 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 mempunyai pageProps dan _app.tsx tersuai, sila luaskan definisi dengan properti dan kod dari atas.

Langkah 4: Melaksanakan rendering sisi pelayan

TacoTranslate membolehkan rendering sisi pelayan bagi terjemahan anda. Ini sangat meningkatkan pengalaman pengguna dengan menunjukkan kandungan yang diterjemah dengan segera, bukannya paparan kandungan yang tidak diterjemah terlebih dahulu. Selain itu, kita boleh melangkau permintaan rangkaian pada klien, kerana kita sudah mempunyai semua terjemahan yang diperlukan.

Kita akan mulakan dengan membuat atau mengubah /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 suai semak isProduction agar sesuai dengan persediaan anda. Jika true, TacoTranslate akan memaparkan kunci API awam. Jika kami berada dalam persekitaran tempatan, ujian atau pementasan (isProduction is false), kami akan menggunakan kunci API read/write rahsia untuk memastikan rentetan baharu dihantar untuk terjemahan.

Sehingga kini, kami hanya menyediakan aplikasi Next.js dengan senarai bahasa yang disokong. Perkara seterusnya yang akan kami lakukan ialah mengambil terjemahan untuk semua halaman anda. Untuk itu, anda akan menggunakan sama ada getTacoTranslateStaticProps atau getTacoTranslateServerSideProps berdasarkan keperluan anda.

Fungsi-fungsi ini mengambil tiga argumen: Satu objek Next.js Static Props Context, konfigurasi untuk TacoTranslate, dan sifat Next.js pilihan. Perhatikan bahawa revalidate pada getTacoTranslateStaticProps ditetapkan kepada 60 secara lalai, supaya terjemahan anda sentiasa dikemas kini.

Untuk menggunakan mana-mana fungsi dalam halaman, andaikan anda mempunyai fail 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 kini sepatutnya boleh menggunakan komponen Translate untuk menterjemah rentetan dalam semua komponen React anda.

import {Translate} from 'tacotranslate/react';

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

Langkah 5: Sebarkan dan uji!

Kami sudah selesai! Aplikasi Next.js anda kini akan diterjemahkan secara automatik apabila anda menambah sebarang rentetan ke dalam komponen Translate. Perhatikan bahawa hanya persekitaran dengan kebenaran read/write pada kekunci API yang akan dapat mencipta rentetan baru untuk diterjemahkan. Kami mengesyorkan memiliki persekitaran staging yang tertutup dan selamat di mana anda boleh menguji aplikasi produksi anda dengan kekunci API seperti itu, menambah rentetan baru sebelum diterbitkan. Ini akan menghalang sesiapa daripada mencuri kekunci API rahsia anda, dan berpotensi mengembang projek terjemahan anda dengan menambah rentetan baru yang tidak berkaitan.

Pastikan untuk melihat contoh lengkap di profil GitHub kami. Di sana, anda juga akan menemui contoh cara melakukannya menggunakan App Router! Jika anda menghadapi sebarang masalah, jangan ragu untuk menghubungi kami, dan kami akan dengan senang hati membantu anda.

TacoTranslate membolehkan anda melokalkan aplikasi React anda secara automatik dengan cepat ke dan dari mana-mana bahasa. Mulakan hari ini!