როგორ განვახორციელოთ ინტერნაციონალიზაცია Next.js აპლიკაციაში, რომელიც იყენებს Pages Router

როგორც მსოფლიო უფრო გლობალიზდება, სულ უფრო მნიშვნელოვანი ხდება ვებ-დეველოპერებისთვის ისეთი აპლიკაციების შექმნა, რომლებიც შეძლებენ მომხმარებლების მომსახურებას სხვადასხვა ქვეყნიდან და კულტურებიდან. ერთ-ერთი ძირითადი გზა ამის მისაღწევად არის ინტერნაციონალიზაცია (i18n), რომელიც საშუალებას გაძლევთ მორგოთ თქვენი აპლიკაცია სხვადასხვა ენებზე, ვალუტებზე და თარიღების ფორმატებზე.

ამ გაკვეთილში ვამოწმებთ, როგორ დაამატოთ ინტერნაციონალიზაცია თქვენს React Next.js აპლიკაციას სერვერზე მხარის რენდერინგთან ერთად. TL;DR: იხილეთ სრული მაგალითი აქ.

ეს სახელმძღვანელო განკუთვნილია Next.js აპლიკაციებისთვის, რომლებიც იყენებენ Pages Router.
თუ იყენებთ App Router, გთხოვთ, ამის ნაცვლად იხილოთ ეს სახელმძღვანელო.

ნაბიჯი 1: დააინსტალირეთ i18n ბიბლიოთეკა

თქვენი Next.js აპლიკაციისთვის საერთაშორისო მხარდაჭერის (i18n) მისაღწევად, პირველ რიგში ავირჩევთ 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: ნაგულისხმევი რეზერვული (fallback) ლოკალის კოდი. ამ მაგალითში დავაყენებთ მას 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!"/>;
}

ახლა თქვენ უკვე შეგიძლიათ გამოიყენოთ Translate კომპონენტი თქვენი 모든 React კომპონენტში სტრიქონების თარგმნისთვის.

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-ზე მეტ ენაზე. დაიწყეთ დღესვე!