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

დავიწყებთ /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 უფლებები, შესაძლებლობა ექნება შეიქმნას ახალი სტრინგები თარგმნისთვის. გირჩევთ გქონდეთ დახურული და დაცული სატესტო (staging) გარემო, სადაც შეძლებთ თქვენს პროდუქციულ აპლიკაციას გამოცდას მსგავსი 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!