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

Қазіргі уақытқа дейін біз Next.js қосымшасын тек қолдау көрсетілетін тілдер тізімімен баптадық. Келесі істейтін ісіміз - барлық беттеріңізге аудармаларды алу. Мұны істеу үшін сіз талаптарыңызға сәйкес getTacoTranslateStaticProps немесе getTacoTranslateServerSideProps қолданасыз.

Бұл функциялар үш аргументті қабылдайды: біреу Next.js Static Props Context объектісі, TacoTranslate үшін конфигурация және опционалды Next.js қасиеттері. Назар аударыңыз, revalidate getTacoTranslateStaticProps функциясында әдепкіде 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 компонентіне кез келген жолдарды қосқанда автоматты түрде аударылады. Назар аударыңыз, жаңа жолдарды аударуға жасауға тек API кілтіне read/write құқықтары бар орталар ғана қол жеткізе алады. Біз сізге жабық және қорғалған staging ортасын қолдануды ұсынамыз, онда сіз өндірістік қосымшаңызды сондай API кілтімен сынай аласыз және жаңа жолдарды тіркеп, оны жұмысқа енгізер алдында тексере аласыз. Бұл сіздің құпия API кілтіңізді ұрлаудан және аударма жобасыңыздың қажетсіз, байланыссыз жолдармен толып кетуінен сақтайды.

Be sure to check out the complete example over at our GitHub profile. There, you’ll also find an example of how to do this using the App Router! If you encounter any problems, feel free to reach out, and we’ll be more than happy to help.

TacoTranslate lets you automatically localize your React applications quickly to and from over 75 languages. Get started today!