Next.js აპებისთვის საერთაშორისო ინტერნაციონალიზაციის (i18n) საუკეთესო გადაწყვეტილება

როგორ მუშაობს

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

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

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

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

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

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

დარწმუნდით, რომ არასოდეს გაამჟღავნოთ საიდუმლო read/write API გასაღები კლიენტის მხარის წარმოების გარემოში.

ჩვენ ასევე დავამატებთ კიდევ ორ გარემოს ცვლადს: TACOTRANSLATE_DEFAULT_LOCALE და TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: ნაგულისხმევი (fallback) ლოკალის კოდი. ამ მაგალითში მას დავაყენებთ en-ს (ინგლისური).
• TACOTRANSLATE_ORIGIN: „ფოლდერი“, სადაც შეინახება თქვენი ტექსტები, მაგალითად თქვენი ვებსაიტის URL. Origins-ის შესახებ მეტი ინფორმაციისთვის წაიკითხეთ აქ.

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: განთავსეთ და შეამოწმეთ!

მთავარი! თქვენი Next.js აპლიკაცია ახლა ავტომატურად დაითარგმნება, როცა Translate კომპონენტში დაამატებთ ნებისმიერ ტექსტს. გაითვალისწინეთ, რომ მხოლოდ იმ გარემოებებს, რომლებსაც API გასაღზე აქვთ read/write ნებართვა, შეეძლებათ ახალი ტექსტების შექმნა თარგმნისთვის. ჩვენ გირჩევთ გქონდეთ დახურული და დაცული სტეიჯინგის გარემო, სადაც შეგიძლიათ გადაამოწმოთ ваша პროდაქშენ აპლიკაცია ასეთ API გასაღით და დაამატოთ ახალი ტექსტები სანამ გადავალთ წარმოებაში. ეს ხელს შეუშლის ვინმეს თქვენს საიდუმლო API გასაღების მოპარვას და თავიდან აგაცილებთ თარგმანის პროექტის გადატვირთვას არაკავშირებული ახალი ტექსტებით.

Be sure to check out the complete example over at our GitHub profile. There, you’ll also find an example of how to do this using the App Router! If you encounter any problems, feel free to reach out, and we’ll be more than happy to help.

TacoTranslate lets you automatically localize your React applications quickly to and from over 75 languages. Get started today!