Pages Router қолданатын Next.js қосымшасында халықаралықтауды қалай енгізуге болады

Әлем жаһанданған сайын, веб-әзірлеушілер үшін әртүрлі елдер мен мәдениеттерден келген пайдаланушыларға арналған қолданбаларды жасау маңыздырақ болуда. Мұны жүзеге асырудың негізгі жолдарының бірі — халықаралықтандыру (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 кілттері қойындысына өтіңіз. Бір 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-адресі. Мұнда origins туралы толығырақ оқыңыз.

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 кілтін көрсетеді. Егер біз локалды, тестілеу немесе 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 компонентіне қосқан кезде олар автоматты түрде аударылатын болады. Назар аударыңыз, тек API кілтінде read/write рұқсаты бар ортада жаңа жолдарды аударуға арналған жасауға болады. Біз жабық және қорғалған тестілеу ортасын ұсынар едік, онда сіз өндірістік қосымшаңызды осындай API кілтімен тексеріп, жаңа жолдарды тіркеуіңізге болады, сол арқылы ресми жұмысқа шықпас бұрын. Бұл сіздің құпия API кілтіңізді ұрлаудан сақтайды және аударма жобанызға жаңа, байланыссыз жолдардың қосылуы арқылы жобаның шамадан тыс толуына жол бермейді.

Әрине, біздің GitHub профиліміздегі толық мысалды қарауды ұмытпаңыз. Сол жерде сіз App Router пайдаланып қалай жасауға болатындығының мысалын да таба аласыз! Егер қандай да бір қиындық туындаса, байланысыңыз
TacoTranslate сізге React қолданбаларын 75-тен астам тілге және тілдерден жылдам автоматты түрде локализациялауға мүмкіндік береді. Бүгін бастау!