როგორ დავნერგოთ ინტერნაციონალიზაცია Next.js აპლიკაციაში, რომელიც იყენებს Pages Router

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

ვიწყებთ /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: გამოქვეყნება და ტესტირება!

დასრულებულია! თქვენი React აპლიკაცია ახლა ავტომატურად ითარგმნება, როდესაც დაამატებთ სტრინგებს Translate კომპონენტში. გაითვალისწინეთ, რომ მხოლოდ ისეთ გარემოებებს, რომელთაც API გასაღზე აქვთ read/write ნებართვები, შეეძლებათ შექმნან ახალი სტრინგები თარგმნისთვის. ჩვენ გირჩევთ გქონდეთ დახურული და უსაფრთხო სტეიჯინგ გარემო, სადაც შეგიძლიათ შეამოწმოთ თქვენი production აპლიკაცია ასეთი API გასაღით და დაამატოთ ახალი სტრინგები ლაივ რეჟიმში გასვლამდე. ეს შეაჩერებს ნებისმიერ გასაღების ქურდობას და ხელს შეუშლის თქვენს თარგმნის პროექტის არასაჭირო გაფართოებას ახალი, არაკავშირებული სტრინგების დამატებით.

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

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