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

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

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

.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. დაწვრილებითი ინფორმაცია ორიგინებზე აქ.

.env

TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com

ნაბიჯი 3: TacoTranslate-ის დაყენება

TacoTranslate-ის თქვენს აპლიკაციაში ინტეგრაციისთვის, თქვენ დაგჭირდებათ შექმნათ კლაიენტი გამოყენებით API გასაღებებისა, რომლებიც ადრე იყო განსაზღვრული. მაგალითად, შექმენით ფაილი სახელწოდებით /tacotranslate-client.js.

/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 პროვაიდერს.

/pages/_app.tsx

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.

/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.

/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 კომპონენტში. დაიმახსოვრეთ, რომ მხოლოდ ის გარემოებები, რომლებსაც აქვთ read/write უფლებები API გასაღებზე, შეძლებენ ახალი სტრიქონების შექმნას თარგმნამდე. ჩვენ გირჩევთ გქონდეთ დახურული და დაცული სტეიჯინგ გარემო, სადაც შეძლებთ ტესტირებას თქვენი წარმოების აპლიკაციის ამგვარი API გასაღებით, ახალი სტრიქონების დამატებით პირდაპირ ლაივზე წასვლამდე. ეს საჭიროზეამედაც კი არ მისცემს მათ თქვენს საიდუმლო API გასაღების გამოყენების შესაძლებლობას და შესაძლებლად გახდის თავიდან ასაცილებლად თარგმნის პროექტის გაფართოებას გაუთვალისწინებელი, არასაკავშირო სტრიქონების დამატებით.