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

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

ამ სასწავლო გზავნილის ფარგლებში, ჩვენ გავეცნობით, როგორ დავამატოთ საერთაშორისო მხარდაჭერა თქვენი React Next.js აპლიკაციაში, სერვერული მხარის ჩვენების (server side rendering) გამოყენებით. TL;DR: სრული მაგალითი იხილეთ აქ.

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

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

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

TacoTranslate ავტომატურად თარგმნის თქვენს ტექსტებს ნებისმიერ ენაზე მოწინავე AI-ს გამოყენებით და განთავისუფლდებით JSON ფაილების კაიาหน้าที่ მართვისაგან.

გადავდეთ მისი ინსტალაცია თქვენი ტერმინალში npm -ის გამოყენებით:

npm install tacotranslate

პირველი ნაბიჯი: შექმენით უფასო TacoTranslate ანგარიში

ახლა, როცა მოდული დაინსტალირებული გაქვთ, დროა შექმნათ თქვენი TacoTranslate ანგარიში, თარგმანის პროექტი და შესაბამისი API გასაღებები. შეიქმენით ანგარიში აქ. ეს უფასოა და არ მოითხოვს საკრედიტო ბარათის დამატებას.

TacoTranslate აპლიკაციის ინტერფეისში შექმენით პროექტი და გადადით მისი 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

პირველი ნაბიჯი: TacoTranslate-ის დაყენება

To integrate TacoTranslate with your application, you’ll need to create a client using the API keys from earlier. For example, create a file named /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 კომპონენტში. გაითვალისწინეთ, რომ მხოლოდ ის გარემოებები, რომელთაც აქვთ read/write უფლებები API გასაღებზე, შეძლებენ ახალი სტრიქონების შექმნას თარგმნისთვის. გირჩევთ გქონდეთ დახურული და დაცული სტეიჯინგი სივრცე, სადაც შეგიძლიათ სცადოთ თქვენი პროდაქშენ აპლიკაცია ასეთი API გასაღებით, ახალი სტრიქონების დამატებით ცოცხალ რეჟიმამდე. ეს თავიდან აგარიდებთ ნებისმიერ პირს თქვენი საიდუმლო API გასაღების მოპარვას და შესაძლო გაუთვალისწინებელ, არაკავშირებული სტრიქონების დამატებით თქვენს თარგმნის პროექტის გადატვირთვას.

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

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