Next.js tətbiqində Pages Router istifadə edilərkən beynəlxalqləşdirməni necə həyata keçirmək olar

Dünya daha da qloballaşdıqca, veb inkişaf etdiriciləri üçün müxtəlif ölkə və mədəniyyətlərdən olan istifadəçilərə uyğun tətbiqlər yaratmaq getdikcə daha vacib olur. Buna nail olmağın əsas yollarından biri beynəlmiləlləşdirmə (i18n) vasitəsilə tətbiqinizi fərqli dillərə, valyutalara və tarix formatlarına uyğunlaşdırmaqdır.

Bu təlimatda, React Next.js tətbiqinizə server tərəfli render (server side rendering) ilə beynəlmiləlləşdirməni necə əlavə edəcəyimizi araşdıracağıq. TL;DR: Tam nümunəni buradan görə bilərsiniz.

Bu bələdçi Pages Router istifadə edən Next.js tətbiqləri üçündür.
Əgər App Router istifadə edirsinizsə, bunun əvəzinə bu bələdçiyə baxın.

Addım 1: i18n kitabxanası quraşdırın

Next.js tətbiqinizdə beynəlxalqlaşdırmanı həyata keçirmək üçün əvvəlcə bir i18n kitabxanası seçəcəyik. Bir neçə məşhur kitabxana var, o cümlədən next-intl. Lakin, bu nümunədə biz TacoTranslate istifadə edəcəyik.

TacoTranslate sətirlərinizi qabaqcıl süni intellektdən istifadə edərək avtomatik olaraq istənilən dilə tərcümə edir və sizi JSON fayllarının yorucu idarə edilməsindən azad edir.

Gəlin terminalınızda npm istifadə edərək onu quraşdıraq:

npm install tacotranslate

Addım 2: Pulsuz TacoTranslate hesabı yaradın

Modulu quraşdırdığınız üçün indi TacoTranslate hesabınızı, bir tərcümə layihəsini və əlaqəli API açarlarını yaratmağın vaxtıdır. Buradan hesab yaradın. Bu pulsuzdur və kredit kartı əlavə etməyinizi tələb etmir.

TacoTranslate tətbiqinin istifadəçi interfeysində layihə yaradın və onun API açarları sekməsinə keçin. Bir read açarı və bir read/write açarı yaradın. Onları mühit dəyişənləri kimi saxlayacağıq. read açarı bizim adlandırdığımız public açardır, read/write açarı isə secret adlanır. Məsələn, onları layihənizin kök qovluğunda olan .env faylına əlavə edə bilərsiniz.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Gizli read/write API açarını müştəri tərəfindəki istehsal mühitlərinə heç vaxt sızdırmayın.

Biz həmçinin iki əlavə ətraf mühit dəyişəni əlavə edəcəyik: TACOTRANSLATE_DEFAULT_LOCALE və TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Varsayılan ehtiyat (fallback) lokal kodu. Bu nümunədə onu İngilis dili üçün en olaraq təyin edəcəyik.
• TACOTRANSLATE_ORIGIN: Sətirlərinizin saxlanacağı “qovluq”, məsələn, saytınızın URL-i. Originlər haqqında daha ətraflı burada oxuyun.

TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com

3-cü addım: TacoTranslate-in qurulması

TacoTranslate-i tətbiqinizə inteqrasiya etmək üçün əvvəlki API açarlarından istifadə edərək bir klient yaratmalısınız. Məsələn, /tacotranslate-client.js adlı bir fayl yaradın.

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;

Tezliklə TACOTRANSLATE_API_KEY avtomatik olaraq təyin ediləcək.

Klienti ayrı faylda yaratmaq onu sonradan yenidən istifadə etməyi asanlaşdırır. İndi xüsusi /pages/_app.tsx faylından istifadə edərək, TacoTranslate provayderini əlavə edəcəyik.

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>
	);
}

Əgər artıq xüsusi pageProps və _app.tsx varsa, tərifi yuxarıdakı xassələr və kodla genişləndirin.

Addım 4: Server tərəfli renderin tətbiqi

TacoTranslate tərcümələrinizin server tərəfdən render edilməsinə imkan verir. Bu istifadəçi təcrübəsini xeyli yaxşılaşdırır — çünki əvvəlcə tərcüməsiz məzmunun qısa şəkildə görünməsi əvəzinə tərcümə olunmuş məzmun dərhal göstərilir. Bundan əlavə, müştəri tərəfində şəbəkə sorğularını atlaya bilərik, çünki artıq ehtiyacımız olan bütün tərcümələr mövcuddur.

Başlayaq /next.config.js faylını yaradaraq və ya dəyişdirərək.

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'),
	});
};

Konfiqurasiyanıza uyğun olaraq isProduction yoxlamasını dəyişdirin. Əgər true olarsa, TacoTranslate ictimai API açarını göstərəcək. Əgər biz yerli, test, və ya staging mühitində oluruqsa (isProduction is false), yeni mətnlərin tərcüməyə göndərildiyinə əmin olmaq üçün gizli read/write API açarından istifadə edəcəyik.

İndiyədək Next.js tətbiqini yalnız dəstəklənən dillərin siyahısı ilə qurmuşuq. Növbəti edəcəyimiz şey bütün səhifələriniz üçün tərcümələri əldə etməkdir. Bunu etmək üçün tələblərinizə əsasən ya getTacoTranslateStaticProps ya da getTacoTranslateServerSideProps istifadə edəcəksiniz.

Bu funksiyalar üç arqument qəbul edir: bir Next.js Static Props Context obyekti, TacoTranslate üçün konfiqurasiya və ixtiyari Next.js xassələri. Qeyd edin ki, revalidate getTacoTranslateStaticProps üzərində standart olaraq 60-a təyin olunub, beləliklə tərcümələriniz güncəllənmiş qalır.

Bu funksiyalardan hər hansı birini bir səhifədə istifadə etmək üçün, gəlin belə bir səhifə faylı olduğunu fərz edək: /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!"/>;
}

İndi bütün React komponentlərinizdəki sətirləri tərcümə etmək üçün Translate komponentindən istifadə edə bilməlisiniz.

import {Translate} from 'tacotranslate/react';

function Component() {
	return <Translate string="Hello, world!"/>
}

5-ci addım: Yerləşdirin və sınaqdan keçirin!

Hazırıq! React tətbiqinizə Translate komponentinə hər hansı bir sətir əlavə etdiyinizdə indi avtomatik olaraq tərcümə olunacaq. Qeyd edin ki, yalnız API açarında read/write icazəsi olan mühitlər yeni tərcümə olunacaq sətirləri yarada bilərlər. Biz tövsiyə edirik ki, istehsal tətbiqinizi belə bir API açarı ilə sınaya biləcəyiniz və yeni sətirləri canlıya çıxmadan əvvəl əlavə edə biləcəyiniz bağlı və təhlükəsiz bir sınaq (staging) mühiti olsun. Bu, gizli API açarınızın oğurlanmasının qarşısını alacaq və yeni, əlaqəsiz sətirlərin əlavə edilməsi ilə tərcümə layihənizin şişməsinin qarşısını ala bilər.

Mütləq GitHub profilimizdəki tam nümunəyə baxın. Orada, bunu App Router istifadə edərək necə edəcəyinizə dair bir nümunə də tapa bilərsiniz! Hər hansı bir problem yaranarsa, çəkinmədən bizimlə əlaqə saxlayın, biz kömək etməkdən məmnun olarıq.

TacoTranslate React tətbiqlərinizi avtomatik olaraq 75-dən çox dilə və bu dillərdən digər dillərə tezcə lokalizasiya etməyə imkan verir. İndi başlayın!