Next.js tətbiqində Pages Router istifadə edərkən beynəlmiləlləşdirməni necə həyata keçirmək

Dünya daha da qloballaşdıqca, veb inkişaf etdiricilər üçün müxtəlif ölkə və mədəniyyətlərdən olan istifadəçilərə uyğunlaşa bilən tətbiqlər yaratmaq daha da vacib olur. Bunu həyata keçirməyin əsas yollarından biri beynəlmiləlləşdirmə (i18n)dir, bu da tətbiqinizi müxtəlif dillərə, valyutalara və tarix formatlarına uyğunlaşdırmağa imkan verir.

Bu dərslikdə React Next.js tətbiqinizə server tərəfli renderinq ilə beynəlmiləlləşdirmə əlavə etməyi 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əlxalqləşməni (i18n) tətbiq etmə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ə TacoTranslate-dən istifadə edəcəyik.

TacoTranslate qabaqcıl süni intellektdən istifadə edərək mətnlərinizi istənilən dilə avtomatik 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ə bir layihə yaradın və onun API açarları sekmesine 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 public adlandırdığımız açardır və read/write açarı secret adlanır. Məsələn, onları layihənizin kök qovluğunda yerləşən .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əfi istehsal mühitlərinə heç vaxt sızdırmadığınızdan əmin olun.

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 lokal kodu. Bu nümunədə onu İngilis dili üçün en olaraq təyin edəcəyik.
• TACOTRANSLATE_ORIGIN: Mətinlərinizin saxlanılacağı “qovluq”, məsələn saytınızın URL-i. Originlər haqqında daha çox məlumat üçün burada oxuyun.

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

3-cü addım: TacoTranslate-i qurmaq

Tətbiqinizə TacoTranslate-i inteqrasiya etmək üçün əvvəlki API açarlarından istifadə edərək bir müştəri (client) 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;

Qısa müddət ərzində 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 isə 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, zəhmət olmasa yuxarıdakı xüsusiyyətlər və kodla tərifi genişləndirin.

4-cü addım: Server tərəfi renderinin tətbiqi

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

İşə /next.config.js faylını yaradaraq və ya dəyişdirərək başlayacağıq.

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 yoxlamasını öz quruluşunuza uyğun dəyişdirin. Əgər truedirsə, TacoTranslate açıq API açarını göstərəcək. Əgər biz yerli, test və ya staging mühitindəyiksə (isProduction is false), yeni sətirlərin tərcümə üçün 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 iş 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: biri Next.js Static Props Context obyekti, TacoTranslate üçün konfiqurasiya və istəyə bağlı Next.js xüsusiyyətləri. Qeyd edək ki, revalidate getTacoTranslateStaticProps üçün standart olaraq 60-a təyin edilib, beləliklə tərcümələriniz güncəldə qalır.

Hər hansı bir funksiyanı səhifədə istifadə etmək üçün, gəlin belə bir səhifə faylınız 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 mətnlə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!"/>
}

Addım 5: Yayımlayın və sınayın!

Hazırıq! React tətbiqiniz indi Translate komponentinə hər hansı mətn əlavə etdiyiniz zaman avtomatik olaraq tərcümə olunacaq. Qeyd edin ki, yalnız API açarına read/write icazəsi verilmiş mühitlər tərcümə üçün yeni sətrlər yarada biləcək. Belə bir API açarı ilə istehsal tətbiqinizi sınaya biləcəyiniz bağlı və təhlükəsiz bir staging mühiti olmasını tövsiyə edirik; yeni sətrləri canlıya çıxmazdan əvvəl ora əlavə edin. Bu, heç kimin heç kimin gizli API açarınızı oğurlamasının və yeni, əlaqəsiz sətrlər əlavə edərək tərcümə layihənizi şişirtməsinin qarşısını alacaq.

Mütləq GitHub profilimizdəki tam nümunəyə baxın. Orada həmçinin bunu App Router istifadə edərək necə edəcəyinizə dair bir nümunə tapa bilərsiniz! Əgər hər hansı problemə rast gəlsəniz, çəkinmədən bizə müraciət edin, və biz kömək etməkdən məmnun olarıq.

TacoTranslate React tətbiqlərinizi 75-dən çox dilə və həmin dillərdən avtomatik və sürətli şəkildə lokalizə etməyə imkan verir. İndi başlayın!