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

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

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

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

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

თქვენი Next.js აპლიკაციაში ინტერნაციონალიზაციის შესასრულებლად, თავდაპირველად ავირჩევთ i18n ბიბლიოთეკას. არსებობს რამდენიმე პოპულარული ბიბლიოთეკა, მათ შორის next-intl. თუმცა, ამ მაგალითში, ჩვენ გამოვიყენებთ TacoTranslate.

TacoTranslate ავტომატურად თარგმნის თქვენს სტრიქონებს ნებისმიერ ენაზე, გამოყენებით უახლეს ხელოვნურ ინტელექტს, და освобლდება 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: სტანდარტული ფოლის ლოკალის კოდი. ამ მაგალითში, ჩვენ დავაყენებთ en-ს ინგლისურისთვის.
• TACOTRANSLATE_ORIGIN: "ფოლდერი", სადაც თქვენს სტრინგები შეინახება, როგორიცაა თქვენი საიტის URL. დააწკაპუნეთ აქ მეტი ინფორმაციის მისაღებად ორიგინებთან დაკავშირებით.

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 გასაღების მოპარვას და შესაძლო გაუთავებელ სტრიქონების დამატებას, რაც ბლოკავს თქვენს თარგმან პროექტს.

დარწმუნდით, რომ ეწვიეთ ჩვენი გიტჰაბის პროფილის სრულ მაგალითს. იქ ასევე ნახავთ მაგალითს, თუ როგორ უნდა გააკეთოთ ეს App Router-ის გამოყენებით! თუ რაიმე პრობლემა შეგექმნათ, თავისუფლად დ დაგვიკავშირდით, და ჩვენ მოხარულები ვიქნებით დაგეხმაროთ.

TacoTranslate საშუალებას გაძლევთ ავტომატურად დაათვითცნობიეროთ თქვენი React აპლიკაციები სწრაფად ნებისმიერ ენაზე და პირიქით. დაიწყეთ დღესვე!