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

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

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

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

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

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

გახსოვდეთ იხილოთ სრული მაგალითი ჩვენს GitHub პროფილზე. იგი ასევე შეიცავს მაგალითს, თუ როგორ უნდა გააკეთოთ ეს App Router -ის გამოყენებით! თუ პრობლემა შეგხვდებათ, თავისუფლად დაგვიკავშირდით, და ჩვენ დიდი სიამოვნებით დაგეხმარებით.

TacoTranslate საშუალებას გაძლევთ ავტომატურად ლოკალიზებდეთ თქვენი React აპლიკაციები სწრაფად ნებისმიერი ენიდან და ენაზე. დაიწყეთ დღესვე!