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

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

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

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

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

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

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

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

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

npm install tacotranslate

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

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

TacoTranslate програмын UI-д төсөл үүсгээд, API keys таб руу орно уу. Нэг 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. Энд үүсэлтэй холбоотой дэлгэрэнгүйг уншина уу.

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 provider-г нэмэх болно.

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: Хөгжүүлэлтэд оруулж, туршина уу!

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

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

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