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

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

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

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

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