როგორ განვახორციელოთ ინტერნაციონალიზაცია 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‑ზე მეტ ენაზე. დაიწყეთ დღესვე!