Next.js програмд Pages Router ашиглан олон хэлний дэмжлэгийг хэрхэн хэрэгжүүлэх вэ

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

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

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

Алхам 1: i18n номын санг суулгана уу

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

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

Түүнийг npm ашиглан терминалдаа суулгацгаая:

npm install tacotranslate

Алхам 2: Үнэгүй TacoTranslate акаунт үүсгээрэй

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

TacoTranslate програмын UI-д төсөл үүсгээд, API түлхүүрүүдийн таб руу шилжнэ үү. Нэг read түлхүүр, нэг read/write түлхүүр үүсгээрэй. Эдгээрийг орчны хувьсагчдад хадгална. 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 хаяг. Эндээс origin-уудын талаар дэлгэрэнгүй уншина уу.

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!"/>;
}

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

import {Translate} from 'tacotranslate/react';

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

Алхам 5: Тархааж, туршина уу!

Бид дууслаа! Одоо таны React програмд ямар ч мөрийг Translate бүрэлдэхүүн хэсэгт нэмэхэд автоматаар орчуулагдах болно. Анхааруулга: зөвхөн read/write эрхтэй API түлхүүртэй орчин л шинэ орчуулга хийх мөрүүдийг үүсгэх боломжтой. Бид хийхийг зөвлөж байна нууцлагдсан, хамгаалалттай staging орчинтой байх, тэнд та бүтээгдэхүүн тань API түлхүүр ашиглан турших бөгөөд шинэ мөрүүдийг амьдруулахын өмнө нэмэх боломжтой. Энэ нь таны нууц API түлхүүрийг хүн бүрээс хамгаалж, орчуулгын төсөлдөө холбоогүй шинэ мөрүүд нэмэгдэж томрохоос сэргийлнэ.

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

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