Cara menerapkan pengantarabangsaan dalam aplikasi Next.js yang menggunakan Pages Router

Apabila dunia menjadi semakin 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 pengantarabangsaan (i18n), yang membolehkan anda menyesuaikan aplikasi anda kepada pelbagai bahasa, mata wang, dan format tarikh.

Dalam tutorial ini, kita akan meneroka cara menambah pengantarabangsaan ke aplikasi React Next.js anda, dengan pemerenderan sisi pelayan. TL;DR: Lihat contoh penuh di sini.

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

Langkah 1: Pasang pustaka i18n

Untuk melaksanakan pengantarabangsaan (i18n) dalam aplikasi Next.js anda, kita akan terlebih dahulu memilih pustaka i18n. Terdapat beberapa pustaka popular, termasuk next-intl. Walau bagaimanapun, dalam contoh ini, kita akan menggunakan TacoTranslate.

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

Mari pasang ia menggunakan npm di terminal anda:

npm install tacotranslate

Langkah 2: Buat akaun TacoTranslate percuma

Sekarang anda telah memasang modul itu, tiba masanya untuk membuat akaun TacoTranslate anda, projek terjemahan, dan kunci API yang berkaitan. Buat akaun di sini. Ia percuma, dan tidak memerlukan anda menambah kad kredit.

Dalam UI aplikasi TacoTranslate, buat projek, dan pergi ke tab kunci API. Buat satu read kunci, dan satu read/write kunci. Kami akan menyimpannya sebagai pembolehubah persekitaran. Kunci read adalah apa yang kami panggil public, dan kunci read/write adalah secret. Contohnya, anda boleh menambahkannya ke fail .env di akar projek anda.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Pastikan anda tidak pernah mendedahkan kunci API rahsia read/write kepada persekitaran pengeluaran sisi klien.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Kod lokal sandaran lalai. Dalam contoh ini, kami akan menetapkannya kepada 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 mengintegrasikan TacoTranslate dengan aplikasi anda, anda perlu membuat klien menggunakan kekunci API yang diberikan tadi. 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 sebentar lagi.

Mencipta klien dalam fail berasingan menjadikannya lebih mudah digunakan semula kemudian. Sekarang, dengan 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, sila kembangkan definisi tersebut dengan sifat-sifat dan kod yang dinyatakan di atas.

Langkah 4: Melaksanakan perenderan sisi pelayan

TacoTranslate membolehkan penjanaan sisi pelayan bagi terjemahan anda. Ini meningkatkan pengalaman pengguna dengan ketara dengan memaparkan kandungan yang diterjemahkan serta-merta, bukannya paparan seketika kandungan yang belum diterjemahkan. Selain itu, kita boleh mengelakkan permintaan rangkaian pada klien kerana kita sudah mempunyai semua terjemahan yang diperlukan.

Kita akan bermula dengan membuat atau mengubahsuai /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 pemeriksaan isProduction supaya sesuai dengan 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 sulit read/write untuk memastikan rentetan baru dihantar untuk diterjemahkan.

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

Fungsi-fungsi ini menerima tiga argumen: satu objek Next.js Static Props Context, konfigurasi untuk TacoTranslate, dan sifat-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 ini dalam sebuah 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 menterjemahkan rentetan dalam semua komponen React anda.

import {Translate} from 'tacotranslate/react';

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

Langkah 5: Terbitkan dan uji!

Selesai! Aplikasi React anda kini akan diterjemahkan secara automatik apabila anda menambah sebarang rentetan ke dalam komponen Translate. Perlu diingat bahawa hanya persekitaran yang mempunyai kebenaran read/write pada kunci API boleh mencipta rentetan baharu untuk diterjemahkan. Kami mengesyorkan mempunyai persekitaran staging yang tertutup dan selamat di mana anda boleh menguji aplikasi pengeluaran anda menggunakan kunci API seperti itu, menambah rentetan baharu sebelum dilancarkan. Ini akan menghalang sesiapa sesiapa daripada mencuri kunci API rahsia anda, dan berpotensi membengkakkan projek terjemahan anda dengan menambah rentetan baharu yang tidak berkaitan.

Pastikan anda semak contoh lengkap di profil GitHub kami. Di sana, anda juga akan menemui contoh cara melakukannya menggunakan App Router! Jika anda menghadapi sebarang masalah, sila hubungi kami, dan kami akan dengan senang hati membantu.

TacoTranslate membolehkan anda melokalkan aplikasi React anda secara automatik dengan pantas ke dan dari lebih daripada 75 bahasa. Mulakan hari ini!