Next.js қолданбалары үшін ең жақсы халықаралықтау (i18n) шешімі

Жұмыс істеу тәртібі

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

Біз аяқтадық! Енді сіздің Next.js қосымшаңызда кез келген мәтінді Translate компонентіне қосқанда, олар автоматты түрде аударылып отырады. Назар аударыңыз, тек read/write құқықтары бар API кілтімен қорғалған ортада ғана аударылатын жаңа мәтіндерді құру мүмкін болады. Біз сізге жабық және қауіпсіз тестілеу ортасын құруды ұсынамыз, онда сіз өндіріс қосымшаңызды осындай API кілтімен сынап, жаңа мәтіндерді қосар алдында тексере аласыз. Бұл сіздің құпия API кілтіңізді ұрлатпауға, сондай-ақ аударма жобасын жаңа, өзара байланысы жоқ мәтіндермен толтырылып кетуден сақтайды.

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