Next.js аппликейшнүүдэд олон улсын боломжийг (i18n) хангах хамгийн шилдэг шийдэл

Яаж ажилладаг вэ

Дэлхий улам бүр олон улсын хэмжээнд холбогдож байгаа тул вэб хөгжүүлэгчдэд янз бүрийн улс орон, соёлын хэрэглэгчдэд зориулагдсан програмуудыг бүтээх нь улам чухал болоод байна. Үүнийг хэрэгжүүлэх үндсэн аргуудын нэг нь олон улсын байршилд тохируулах (i18n) явдал бөгөөд энэ нь таны програмыг өөр өөр хэл, валют, огноо форматын дагуу зохицуулах боломжийг олгоно.

Энэхүү зааварчилгаанд бид сервер талын рендерингтэй React Next.js програмд олон улсын байршил нэмэх аргыг судлах болно. TL;DR: Б teljes жишээг эндээс үзнэ үү.

Энэхүү гарын авлага нь Pages Router ашиглаж байгаа Next.js програмуудын хувьд зориулагдсан болно.
Хэрэв та App Router ашиглаж байгаа бол үүний оронд энэ гарын авлагыг үзнэ үү.

Алхам 1: i18n санг суулгаарай

Таний Next.js аппликейшнд олон улсын дэмжлэг (internationalization) хэрэгжүүлэхийн тулд эхлээд i18n санг сонгоно. Олны танил хэд хэдэн сангууд байдаг бөгөөд үүнд next-intl орно. Гэсэн хэдий ч, энэ жишээнд бид TacoTranslate-г ашиглах болно.

TacoTranslate бол хамгийн орчин үеийн AI ашиглан таны текстүүдийг аль ч хэл рүү автоматаар орчуулж, JSON файлуудыг төвөгтэй удирдлагаас таныг чөлөөлдөг.

Одоо терминал дээрээ npm ашиглан суулгана уу:

npm install tacotranslate

2-р алхам: Үнэгүй TacoTranslate данс үүсгээрэй

Одоо та модулыг суулгасан тул TacoTranslate дансаа үүсгэж, орчуулгын төсөл болон холбогдох API түлхүүрүүдээ бүтээх цаг боллоо. Энд данс үүсгээрэй. Энэ үнэгүй бөгөөд кредит карт нэмэх шаардлагагүй.

TacoTranslate аппликейшний UI дотор төсөл үүсгээд, API түлхүүрүүдийн таб руу орно уу. Нэг read түлхүүр, нэг read/write түлхүүр үүсгээрэй. Бид эдгээрийг орчны хувьсагчууд (environment variables) болгон хадгална. read түлхүүрийг бид public гэж нэрлэдэг бол, read/write түлхүүр нь secret юм. Жишээ нь, үүнийг төсөлд тань үндсэн фолдерт байрлах .env файлд нэмэх боломжтой.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Нууц read/write API түлхүүрийг клиент талын үйлдвэрлэлийн орчинд огт задруулахгүй байхдаа анхаараарай.

Бид бас хоёр орчны хувьсагч нэмж оруулах болно: TACOTRANSLATE_DEFAULT_LOCALE ба TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Өгөгдсөн анхны орон нутгийн хэлний код. Энэ жишээнд бид үүнийг en буюу Англи хэлээр тохируулна.
• TACOTRANSLATE_ORIGIN: Таны утгууд хадгалагдах "фолдер", жишээ нь таны вэбсайтын URL. Энд гарал үүслийн талаар дэлгэрэнгүй уншина уу.

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

Алхам 3: TacoTranslate тохируулах

TacoTranslate-ийг таны програмд нэвтрүүлэхийн тулд өмнө өгөгдсөн API түлхүүрүүдийг ашиглан клиент үүсгэх хэрэгтэй болно. Жишээ нь, /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;

Бид удахгүй автоматаар TACOTRANSLATE_API_KEY тодорхойлно.

Клиент үүсгэхийг тусад нь файлд хийх нь дараа дахин ашиглахад илүү хялбар болгодог. Одоо, өөрийн гэсэн /pages/_app.tsx файлыг ашиглан бид 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>
	);
}

Хэрэв танд аль хэдийнээ өөрчилсөн pageProps ба _app.tsx байгаа бол дээрх шинж чанар болон кодоор тодорхойлолтоо өргөжүүлнэ үү.

Алхам 4: Сервер талын буулган уншихыг хэрэгжүүлэх

TacoTranslate нь таны орчуулгуудыг сервер талд дүрслэх боломжийг олгодог. Энэ нь хэрэглэгчийн туршлагыг ихээхэн сайжруулдаг бөгөөд эхлээд орчуулаагүй агуулга гэнэт харагдахыг орхиж, орчуулсан агуулгыг даруй харуулдаг. Түүнээс гадна, бид клиент тал дээрх сүлжээний хүсэлтийг алгасаж чадна, учир нь бидэнд аль хэдийн хэрэгтэй бүх орчуулга бэлэн байдаг.

Бид /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'),
	});
};

Өөрийн зохион байгуулалтад тохируулан isProduction шалгалтыг өөрчил. Хэрэв trueбайвал TacoTranslate олон нийтийн API түлхүүрийг ил гаргана. Хэрвээ бид local, test эсвэл staging орчинд (isProduction is falseбайвал шинэ мөрүүдийг орчуулахаар илгээхийн тулд нууц read/write API түлхүүрийг ашиглана.

Одоогоор бид зөвхөн Next.js програмд дэмжигдсэн хэлний жагсаалтыг тохируулсан байна. Дараагийн хийх зүйл бол таны бүх хуудсуудын орчуулгыг авах явдал юм. Үүний тулд таны шаардлагад тохируулан getTacoTranslateStaticProps эсвэл getTacoTranslateServerSideProps функцийг ашиглана.

Эдгээр функцууд гурван аргумент авдаг: нэг Next.js Static Props Context объект, TacoTranslate-ийн тохиргоо, мөн нэмэлт Next.js шинж чанарууд. getTacoTranslateStaticProps дээрх revalidate нь анхдагчаар 60-д тохируулагдсан тул таны орчуулгууд шинэчлэгдсээр байх болно.

Эдгээр функцуудын аль алийг нь хуудсан дээр ашиглахын тулд, жишээлбэл, танд /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!"/>;
}

Одоо та Translate бүрэлдэхүүн хэсгийг бүх React бүрэлдэхүүн хэсгүүдийнхээ доторх мөрүүдийг орчуулахад ашиглах боломжтой болсон байх ёстой.

import {Translate} from 'tacotranslate/react';

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

Алхам 5: Гарган байршуулж, туршиж үзээрэй!

Бид бэлэн боллоо! Та Next.js програмдаа ямар нэгэн үгнүүдийг Translate бүрэлдэхүүнд нэмэхэд автоматжуулсан орчуулга хийгдэх болно. Гэхдээ зөвхөн read/write эрхтэй API түлхүүртэй орчинд л шинэ орчуулгдах үгсийг үүсгэж чадна гэдгийг анхаарна уу. Бид танд үйлдвэрлэлийн програмыг API түлхүүртэйгээр турших, шинэ үгс нэмэхээс өмнө ашиглах хаалттай, аюулгүй орчныг бий болгохыг зөвлөж байна. Ингэснээр таны нууц API түлхүүр хулгайлагдахгүй бөгөөд холбогдолгүй шинэ үгс нэмэгдэж орчуулгын төсөл томрохоос сэргийлнэ.

Заавал манай GitHub профайл дээрх бүрэн жишээг шалгаарай. Тэнд та App Router ашиглан хэрхэн хийх жишээг ч олж харах болно! Хэрэв ямар нэгэн асуудал тулгарвал, дуртайяа холбоо барина уу, бид танд туслахдаа баяртай байх болно.

TacoTranslate нь таны React програмуудыг хурдан шуурхай ямар ч хэл рүү болон ямар ч хэлнээс өөрчилж локалчлах боломжийг олгодог. Өнөөдөр эхлээрэй!