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

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

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

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

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

ნაბიჯი 1: დააინსტალირეთ i18n ბიბლიოთეკა

შემდეგი.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 აპლიკაციები ნებისმიერ ენაზე და არჩევით ენაზე სწრაფად. დაიწყეთ დღესვე!