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

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

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

ჩვენ დავიწყებთ /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 თვისებები. გაითვალისწინეთ, რომ getTacoTranslateStaticProps–ში revalidate ნაგულისხმევად არის დაყენებული 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!