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

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

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

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

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

ნაბიჯი 1: დააყენეთ i18n ბიბლიოთეკა

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