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

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

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

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

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!