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 қолданба интерфейсінде жоба жасап, оның 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 кілтін көрсетеді. Егер біз локальды, тестілеу немесе енгізу алдындағы ортада болсақ (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 қолданбаларыңызды кез келген тілге және тілден автоматты түрде тез аударуға мүмкіндік береді. Бүгіннен бастап көріңіз!