Next.js tətbiqində Pages Router istifadə edilirsə, beynəlxalqlaşdırmanı necə həyata keçirmək

Dünya 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ğun tətbiqlər yaratmaq getdikcə daha vacib olur. Buna nail olmağın ə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 təlimatda React Next.js tətbiqinizə server-tərəfli render ilə beynəlmiləlləşdirməni necə əlavə etməyi araşdıracağıq. TL;DR: Tam nümunəni burada görə bilərsiniz.

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

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

Next.js tətbiqinizdə beynəlmiləlləşdirmə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ə biz TacoTranslate 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 bunu terminalınızda npm istifadə edərək quraşdıraq:

npm install tacotranslate

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

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

TacoTranslate tətbiqinin UI-sində bir layihə yaradın və onun API açarları tabına 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 açardı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əfindəki istehsal mühitlərinə heç vaxt sızdırmadığınızdan əmin olun.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Varsayılan geri dönüş (fallback) lokal kodu. Bu nümunədə onu ingilis dili üçün en olaraq təyin edəcəyik.
• TACOTRANSLATE_ORIGIN: Sətirlərinizin saxlanılacağı “qovluq”, məsələn veb saytınızın URL-i. Mənşələr haqqında daha ətraflı məlumatı burada oxuyun.

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

Addım 3: 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 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 olunacaq.

Klienti ayrı bir faylda yaratmaq onu sonradan yenidən istifadə etməyi asanlaşdırır. İndi, xüsusi /pages/_app.tsx faylı 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 sizdə artıq xüsusi pageProps və _app.tsx varsa, zəhmət olmasa tərifə yuxarıdakı xüsusiyyətləri və kodu əlavə edin.

Addım 4: Server tərəfli renderləşməni həyata keçirmək

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

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ğunlaşdırmaq üçün isProduction yoxlamasını dəyişdirin. Əgər true-dirsə, TacoTranslate ictimai API açarını göstərəcək. Əgər lokal, test və ya staging mühitində olsaq (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ətbiqində yalnız dəstəklənən dillərin siyahısını təyin etmişik. İndi 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 edin ki, revalidate getTacoTranslateStaticProps üzərində standart olaraq 60-a təyin edilib, beləliklə tərcümələriniz güncəl qalır.

Hər hansı bir funksiyanı səhifədə istifadə etmək üçün gəlin fərz edək ki, sizin /pages/hello-world.tsx kimi bir səhifə faylınız var.

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: Yerləşdirin və test edin!

İşimiz bitdi! React tətbiqiniz artıq Translate komponentinə hər hansı sətri əlavə etdiyiniz zaman avtomatik olaraq tərcümə olunacaq. Qeyd edin ki, API açarında read/write icazəsi olan mühitlər yalnız yeni tərcümə olunacaq sətrləri yarada biləcəklər. Məhsul tətbiqinizi belə bir API açarı ilə sınaqdan keçirə biləcəyiniz bağlanmış və təhlükəsiz bir staging mühiti saxlamanızı tövsiyə edirik, canlıya keçməzdən əvvəl yeni sətrlər əlavə etməklə. Bu, heç kəsin sizin gizli API açarınızı oğurlamasının və potensial olaraq tərcümə layihənizi yeni, əlaqəsiz sətrlərlə şişirtməsinin qarşısını alacaq.

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!