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

Dünya daha da qloballaşdıqca, veb tərtibatçılar üçün müxtəlif ölkə və mədəniyyətlərdən olan istifadəçilərə yönəlmiş tətbiqlər yaratmaq getdikcə daha vacib olur. Bunu reallaşdırmanın əsas yollarından biri beynəlxalqlaşdırmadır (i18n), 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əfdə render ilə beynəlxalqlaşdırmanı necə əlavə etməyi öyrənəcəyik. 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 üçün nəzərdə tutulub.
Ə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 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 intellektdən istifadə edərək sətirlərinizi 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 bunu terminalınızda npm ilə quraşdıraq:

npm install tacotranslate

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

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

TacoTranslate tətbiqinin UI-sində bir layihə yaradın və onun API açarları sekmesini açın. Bir read açarı və bir read/write açarı yaradın. Onları ətraf mühit dəyişənləri kimi saxlayacağıq. read açarına public deyirik, read/write açarı isə secret-dir. 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əfi istehsal mühitlərinə gizli read/write API açarını 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: Defolt ehtiyat locale kodu. Bu nümunədə, onu İngilis dili üçün en kimi təyin edəcəyik.
• TACOTRANSLATE_ORIGIN: Sətirlərinizin saxlanılacağı “qovluq”, məsələn, saytınızın URL-si. Burada originlər haqqında daha çox oxuyun.

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

3-cü addım: TacoTranslate qurulması

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

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

Müştərini ayrı bir faylda yaratmaq onu sonradan təkrar istifadə etməyi asanlaşdırır. İndi isə, xüsusi /pages/_app.tsx faylından 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, zəhmət olmasa yuxarıdakı xüsusiyyətlər və kodla tərifinizi genişləndirin.

4-cü Addım: Server tərəfi renderinqinin tətbiqi

TacoTranslate tərcümələriniz üçün server tərəfi renderini təmin edir. Bu, tərcümə olunmamış məzmunun əvvəlcə yanıb-sönməsi əvəzinə, tərcümə olunmuş məzmunun dərhal göstərilməsi ilə istifadəçi təcrübəsini xeyli yaxşılaşdırır. Bundan əlavə, biz müştəridə şəbəkə sorğularını atlaya bilərik, çünki artıq ehtiyacımız olan bütün 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 true olarsa, 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əyə göndərildiyinə əmin olmaq üçün gizli read/write API açarından istifadə edəcəyik.

Indiyədək Next.js tətbiqini yalnız dəstəklənən dillərin siyahısı ilə qurmuşuq. İndi isə növbəti addım olaraq bütün səhifələriniz üçün tərcümələri əldə edəcəyik. Bunu etmək üçün tələblərinizə görə ya getTacoTranslateStaticProps ya da getTacoTranslateServerSideProps istifadə edəcəksiniz.

Bu funksiyalar üç arqument qəbul edir: Bir Next.js Static Props Context obyekti, TacoTranslate konfiqurasiyası və əlavə Next.js xüsusiyyətləri. Qeyd edin ki, getTacoTranslateStaticProps funksiyasında revalidate standart olaraq 60 saniyəyə təyin olunub, beləliklə tərcümələriniz güncəl qalır.

Hər iki funksiyanı bir səhifədə istifadə etmək üçün, gəlin qəbul edək ki, sizin /pages/hello-world.tsx adlı 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 Translate komponentindən istifadə edərək bütün React komponentlərinizdə olan sətrləri tərcümə 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! İ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çarı olan mühitlər yeni tərcümə ediləcək sətirlər yarada biləcəklər. Tövsiyəmiz budur ki, bağlanmış və təhlükəsiz bir sınaq mühiti yaradıb, orada istehsal tətbiqinizi belə bir API açarı ilə sınayasınız, yeni sətirləri canlıya keçməzdən əvvəl əlavə edəsiniz. Bu, heç kimin gizli API açarınızı oğurlamasının qarşısını alacaq və tərcümə layihənizin əlaqəsiz yeni sətirlərlə şişməsinin qarşısını alacaq.

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

TacoTranslate React tətbiqlərinizi istənilən dildən digərinə avtomatik sürətli şəkildə lokalizasiya etməyə imkan verir. Bu gün başlayın!