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

Dünya daha qlobal olduqca, veb inkişaf etdiriciləri üçün müxtəlif ölkələrdən və mədəniyyətlərdən olan istifadəçilərə xidmət göstərən tətbiqlər yaratmaq getdikcə daha vacib olur. Bunu əldə etməyin əsas yollarından biri beynəlxalqlaşmadır (i18n), bu da tətbiqinizi müxtəlif dillərə, valyutalara və tarix formatlarına uyğunlaşdırmağa imkan verir.

Bu təlimdə React Next.js tətbiqinizə server tərəfində renderləşdirmə ilə birlikdə beynəlxalqlaşmanı necə ə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ə, zəhmət olmasa onun yerinə bu bələdçiyə baxın.

1-ci Addım: 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 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 sətrlərinizi avtomatik olaraq istənilən dilə tərcümə edir və JSON fayllarını yorucu şəkildə idarə etməkdən sizi azad edir.

Gəlin bunu npm ilə terminalınızda quraşdıraq:

npm install tacotranslate

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

İndi modul quraşdırıldığından, TacoTranslate hesabınızı, tərcümə layihəsini və əlaqəli API açarlarını yaratmaq vaxtıdır. Burada hesab yaradın. Bu pulsuzdur və kredit kartı əlavə etməyinizi tələb etmir.

TacoTranslate tətbiqinin UI hissəsində 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ına public deyirik və read/write açarı isə 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

Müştəri tərəfi istehsal mühitlərinə gizli read/write API açarını heç vaxt sızdırmamağa diqqət yetirin.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Əsas ehtiyat lokal kodu. Bu nümunədə, onu ingilis dili üçün en kimi təyin edəcəyik.
• TACOTRANSLATE_ORIGIN: Siznin sətirlərinizin saxlanacağı “qovluq”, məsələn, saytınızın URL-i. Burada origonlar haqqında daha çox oxuyun.

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

3-cü addım: TacoTranslate qurulması

To integrate TacoTranslate with your application, you’ll need to create a client using the API keys from earlier. For example, create a file named /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;

Biz tezliklə avtomatik olaraq TACOTRANSLATE_API_KEY təyin edəcəyik.

Müştərini ayrıca bir 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 özəl pageProps və _app.tsx varsa, zəhmət olmasa təsviri yuxarıda göstərilən xüsusiyyətlər və kod ilə genişləndirin.

4-cü Addım: Server tərəfi render edilməsinin tətbiqi

TacoTranslate tərcümələrinizin server tərəfdə render olunmasına imkan verir. Bu, istifadəçi təcrübəsini xeyli yaxşılaşdırır, çünki əvvəlcə tərcümə olunmamış məzmunun yanıb-sönməsi əvəzinə, dərhal tərcümə olunmuş məzmunu göstərir. Bundan əlavə, müştəri tərəfində şəbəkə sorğularını keçə bilərik, çünki artıq ehtiyacımız olan bütün tərcümələrimiz var.

İlk olaraq /next.config.js faylını yaradacaq və ya dəyişdirəcəyik.

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 konfiqurasiyanıza uyğun olaraq dəyişdirin. Əgər truedirsə, TacoTranslate ictimai API açarını göstərəcək. Əgər biz lokal, test və ya staging mühitindəyiksə (isProduction is false), yeni sətrlərin tərcümə üçün göndərildiyinə əmin olmaq üçün gizli read/write API açarından istifadə edəcəyik.

İndiyə qədər yalnız Next.js tətbiqini dəstəklənən dillərin siyahısı ilə təyin etmişik. Növbəti edəcəyimiz şey bütün səhifələriniz üçün fetch tərcümələri etməkdir. Bunun üçün tələblərinizə əsasən ya getTacoTranslateStaticProps , ya da getTacoTranslateServerSideProps istifadə edəcəksiniz.

Bu funksiyalar üç arqument götürür: bir Next.js Static Props Context obyekt, TacoTranslate üçün konfiqurasiya və seçimli Next.js xüsusiyyətləri. Qeyd edək ki, getTacoTranslateStaticProps revalidate 60-a təyin olunub, belə ki, tərcümələriniz yenilənir.

Hər iki funksiyanı bir səhifədə istifadə etmək üçün, /pages/hello-world.tsxkimi bir səhifə faylınız olduğunu fərz edək .

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 Translate komponentindən istifadə edərək bütün React komponentlərinizdə olan mətnləri tərcümə edə bilməlisiniz.

import {Translate} from 'tacotranslate/react';

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

5-ci addım: Yerləşdir və sına!

Biz işimizi bitirdik! İndi React tətbiqinizdə Translate komponentinə hər hansı sətir əlavə etdikdə, o, 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ər yarada bilərlər. Biz tövsiyə edirik ki, bu cür API açarı ilə istehsal tətbiqinizi sınaqdan keçirə biləcəyiniz bağlı və təhlükəsiz bir staging mühiti olsun və yeni sətirləri canlı yayına keçmədən əlavə edəsiniz. Bu, kiminləsə sirli API açarınızı oğurlanmasının qarşısını alacaq və potensial olaraq tərcümə layihənizin lazımsız, əlaqəsiz sətirlərlə dolmasını əngəlləyəcək.

Əmin olun ki, bizim GitHub profilimizdə tam nümunəyə baxasınız. Orada, həmçinin bunu App Router istifadə edərək necə etmək barədə nümunə tapacaqsınız! Hər hansı bir problem yaşasanız, bizimlə əlaqə saxlamaqdan çəkinməyin, və biz sizə kömək etməkdən məmnun olarıq.

TacoTranslate React tətbiqlərinizi sürətlə və avtomatik olaraq istənilən dilə və dildən lokalizə etməyə imkan verir. Bu gün başlayın!