Next.js tətbiqində Pages Router istifadə edən bir proqramda beynəlxalqlaşdırmanı necə həyata keçirmək olar

Dünya getdikcə qloballaşdıqca, veb inkişafçılar üçün fərqli ölkələrdən və mədəniyyətlərdən olan istifadəçilərə uyğun tətbiqlər yaratmaq daha da önəmli olur. Bunu əldə etməyin əsas yollarından biri beynəlxalqlaşdırma (i18n) vasitəsilədir, bu da sizin 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əfi renderlərlə birlikdə beynəlxalqlaşdırmanın necə əlavə olunacağını araşdıracağıq. TL;DR: Tam nümunəni buradan baxın.

Bu bələdçi Pages Router istifadə edən Next.js tətbiqləri üçün nəzərdə tutulub.
Əgər App Router istifadə edirsinizsə, zəhmət olmasa onun yerinə bu bələdçiyə baxın.

Addım 1: i18n kitabxanasını 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 mövcuddur, o cümlədən next-intl. Lakin, bu nümunədə biz TacoTranslate istifadə edəcəyik.

TacoTranslate qabaqcıl süni intellekti istifadə edərək avtomatik olaraq sətirlərinizi hər hansı bir dilə tərcümə edir və sizi JSON fayllarının mürəkkəb idarəsindən azad edir.

Gəlin terminalınızda npm ilə onu quraşdırırıq:

npm install tacotranslate

2-ci addım: Pulsuz TacoTranslate hesabı yaradın

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

TacoTranslate tətbiqinin UI-sində bir layihə yaradın və API açarları sekmesine keçin. Bir read açarı və bir read/write açarı yaradın. Onları ətraf mühit dəyişənləri kimi yadda saxlayacağıq. read açarını public adlandırırıq, read/write açarı isə secret adlanır. Məsələn, onları layihənizin kök qovluğundakı .env faylına əlavə edə bilərsiniz.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Müştəri tərəfli istehsal mühitlərinə heç vaxt gizli read/write API açarını 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: Defolt ehtiyat dil kodu. Bu nümunədə, onu İngilis 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. Burada orijinlər haqqında daha çox oxuyun.

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

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

TacoTranslate-ı tətbiqinizə birləşdirmə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;

Bir az sonra avtomatik olaraq TACOTRANSLATE_API_KEY təyin ediləcək.

Müştərini ayrı bir faylda yaratmaq, onu sonradan yenidən istifadə etməyi asanlaşdırır. İndi, xüsusi /pages/_app.tsx istifadə edərək, TacoTranslate təminatçısını ə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 özəl pageProps və _app.tsx fayllarınız varsa, xahiş edirik yuxarıda göstərilən xüsusiyyətlər və kodla tərifinizi genişləndirin.

Addım 4: Server tərəfi renderinin tətbiqi

TacoTranslate tərcümələrinizin server tərəfi renderlənməsinə imkan verir. Bu, tərcümə olunmamış məzmunun qısa müddətdə göstərilməsindən fərqli olaraq, tərcümə edilmiş məzmunu dərhal göstərməklə istifadəçi təcrübəsini xeyli yaxşılaşdırır. Bundan əlavə, müştəri tərəfində şəbəkə sorğularını keçə bilərik, çünki artıq bütün lazım olan tərcümələrə sahibik.

Biz /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ş isə bütün səhifələriniz üçün tərcümələri yükləmə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ə seçmə Next.js xüsusiyyətləri. Qeyd edin ki, getTacoTranslateStaticProps içindəki revalidate varsayılan olaraq 60 olaraq təyin edilib, beləliklə tərcümələriniz güncəllənir.

Hər iki funksiyanı bir səhifədə istifadə etmək üçün, fərz edək ki, sizin belə bir səhifə faylınız var: /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ətrlə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: Yayınla və sınayın!

Biz işimizi bitirdik! İndi, React tətbiqinizdə istənilən sətiri Translate komponentinə əlavə etdiyiniz zaman avtomatik olaraq tərcümə ediləcək. Qeyd edək ki, yalnız read/write icazələrinə malik API açarları olan mühitlər yeni tərcümə olunacaq sətirləri yarada biləcəklər. Tövsiyəmiz odur ki, belə bir API açarı ilə istehsal tətbiqinizi test edə biləcəyiniz bağlanmış və təhlükəsiz bir staging mühiti olsun, beləliklə canlı yayına keçməzdən əvvəl yeni sətirlər əlavə edə biləsiniz. Bu, sirli API açarınızın oğurlanmasının qarşısını alacaq və potensial olaraq tərcümə layihənizi əlaqəsiz yeni sətirlərlə yükdən qurtaracaq.

Əmin olun ki, tam nümunəni GitHub profilimizdə yoxlayasınız. Orada, həmçinin bu işi App Router istifadə edərək necə edəcəyinizə dair nümunə tapa bilərsiniz! Hər hansı bir problem yaşasanız, bizimlə əlaqə saxlayın, və biz sizə məmnuniyyətlə kömək edəcəyik.

TacoTranslate React tətbiqlərinizi avtomatik olaraq 75-dən çox dildə sürətlə lokalizasiya etməyə imkan verir. Bu gün başlayın!