როგორ უნდა დაინერგოს ინტერ­na­ცი­ო­ნა­ლიზა 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: ნაგულისხმევი ადგილმდებარეობის კოდი. ამ მაგალითში, ჩვენ დავაყენებთ en ინგლისურისათვის.
• TACOTRANSLATE_ORIGIN: "თეარი", სადაც შენახული იქნება შენი სტრიქონები, მაგალითად შენი ვებგვერდის URL-ი. Დაწვრილებით წაიკითხეorigine-ებზე აქ.

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 აპლიკაციების ლოკალიზაცია ნებისმიერ ენაზე და ნებისმიერი ენიდან. დაეწყეთ დღესვე!