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

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!