Cara untuk melaksanakan pengantarabangsaan dalam aplikasi Next.js yang menggunakan Pages Router

Ketika dunia semakin global, adalah semakin penting bagi pembangun web untuk membina aplikasi yang boleh memenuhi keperluan pengguna dari pelbagai negara dan budaya. Salah satu cara utama untuk mencapai ini adalah melalui pensinternasionalan (i18n), yang membolehkan anda menyesuaikan aplikasi anda ke dalam pelbagai bahasa, mata wang, dan format tarikh.

Dalam tutorial ini, kami akan meneroka bagaimana untuk menambah pensinternasionalan ke 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 pengantarabangsaan dalam aplikasi Next.js anda, kita akan mula memilih perpustakaan i18n. Terdapat beberapa perpustakaan popular, termasuk next-intl. Walau bagaimanapun, dalam contoh ini, kita akan menggunakan TacoTranslate.

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

Jom pasangkan ia menggunakan npm di terminal anda:

npm install tacotranslate

Langkah 2: Cipta akaun TacoTranslate percuma

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

Dalam antara muka aplikasi TacoTranslate, buat satu projek, dan navigasi ke tab kunci API-nya. Buat satu kunci read dan satu kunci read/write. Kami akan menyimpannya sebagai pembolehubah persekitaran. Kunci read adalah apa yang kami panggil public dan kunci read/write adalah secret. Sebagai contoh, 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 kekunci API rahsia read/write kepada persekitaran produksi sisi klien.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Kod lalai untuk bahasa sandaran. Dalam contoh ini, kami akan tetapkan kepada en untuk bahasa Inggeris.
• TACOTRANSLATE_ORIGIN: “Folder” di mana rentetan anda akan disimpan, seperti URL laman web anda. Baca lebih lanjut tentang origins di sini.

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

Langkah 3: Menyediakan TacoTranslate

Untuk mengintegrasikan TacoTranslate dengan aplikasi anda, anda perlu membuat klien menggunakan kunci API dari sebelumnya. Sebagai contoh, buat 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 menentukan TACOTRANSLATE_API_KEY tidak lama lagi.

Membuat klien dalam fail yang berasingan menjadikannya lebih mudah untuk digunakan semula kemudian. Kini, menggunakan /pages/_app.tsx tersuai, 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 khas, sila luaskan definisi tersebut dengan sifat dan kod dari atas.

Langkah 4: Melaksanakan rendering sisi pelayan

TacoTranslate membenarkan rendering sisi server bagi terjemahan anda. Ini meningkatkan pengalaman pengguna dengan memaparkan kandungan yang telah diterjemah dengan segera, bukannya paparan kandungan yang belum diterjemah terlebih dahulu. Selain itu, kita boleh mengelakkan permintaan rangkaian pada klien, kerana kita sudah mempunyai semua terjemahan yang diperlukan.

Kita akan bermula 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 pemeriksaan isProduction mengikut tetapan anda. Jika true, TacoTranslate akan memaparkan kunci API awam. Jika kita berada dalam persekitaran tempatan, ujian, atau staging (isProduction is false), kita akan menggunakan kunci API rahsia read/write untuk memastikan rentetan baru dihantar untuk terjemahan.

Sehingga kini, kami hanya menyediakan aplikasi Next.js dengan senarai bahasa yang disokong. Perkara seterusnya yang akan kami lakukan adalah mendapatkan terjemahan untuk semua halaman anda. Untuk melakukannya, 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 yang optional. Ambil perhatian bahawa revalidate pada getTacoTranslateStaticProps ditetapkan kepada 60 secara lalai, supaya terjemahan anda sentiasa dikemas kini.

Untuk menggunakan salah satu fungsi ini dalam halaman, anggap 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 React anda kini akan diterjemahkan secara automatik apabila anda menambah sebarang string ke dalam komponen Translate. Perlu diingat bahawa hanya persekitaran dengan kebenaran read/write pada kunci API akan dapat mencipta string baru untuk diterjemahkan. Kami mengesyorkan untuk mempunyai persekitaran staging yang tertutup dan selamat di mana anda boleh menguji aplikasi produksi anda dengan kunci API seperti itu, menambah string baru sebelum siaran langsung. Ini akan mengelakkan sesiapa daripada mencuri kunci API rahsia anda, dan berpotensi membengkakkan projek terjemahan anda dengan menambah string baru yang tidak berkaitan.

Pastikan untuk melihat contoh lengkap di profil GitHub kami. Di sana, anda juga akan menemui contoh bagaimana melakukan ini menggunakan App Router! Jika anda menghadapi sebarang masalah, jangan teragak-agak untuk hubungi kami, dan kami akan dengan senang hati membantu.

TacoTranslate membolehkan anda menterjemah aplikasi React anda secara automatik dengan cepat ke dan dari lebih 75 bahasa. Mulakan hari ini!