Next.js tətbiqində Pages Router istifadə edilərkən beynəlxalqlaşdırmanı necə tətbiq etmək olar

Dünya getdikcə daha qloballaşdıqca, veb inkişaf etdiriciləri üçün müxtəlif ölkələrdən və mədəniyyətlərdən olan istifadəçilərə uyğun gələn tətbiqlər yaratmaq getdikcə daha vacib olur. Bunu həyata keçirməyin əsas yollarından biri beynəlxalqlaşdırma (i18n) vasitəsilə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əfdə renderləmə ilə beynəlxalqlaşdırma necə əlavə etməyi araşdıracağıq. TL;DR: Tam nümunəyə buradan baxın.

Bu təlimat 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 bunun yerinə bu təlimata baxın.

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

Next.js tətbiqinizdə beynəlxalqlaşmanı 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ə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 onu npm ilə terminalınızda quraşdıraq:

npm install tacotranslate

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

İndi modul quraşdırıldığından sonra, TacoTranslate hesabınızı, tərcümə layihənizi və əlaqəli API açarlarınızı yaratmağın vaxtıdır. Hesab yaradın burada. Bu pulsuzdur və kredit kartı əlavə etməyə ehtiyac yoxdur.

TacoTranslate tətbiqinin İstifadəçi İnterfeysində bir layihə yaradın və onun API keys sekmesine keçin. Bir read açarı və bir read/write açarı yaradın. Biz onları ətraf mühit dəyişənləri kimi yadda saxlayacağıq. read açarına public deyirik, read/write açarı isə secret adlanır. Məsələn, onları layihənizin kökündəki .env faylına əlavə edə bilərsiniz.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Gizli read/write API açarını heç vaxt müştəri tərəfi istehsal mühitlərinə sızdırmadığınızdan əmin olun.

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 olaraq istifadə olunan təkrar seçilən lokal kodu. Bu nümunədə, ingilis dili üçün en təyin edəcəyik.
• TACOTRANSLATE_ORIGIN: Mətnlərinizin saxlanılacağı “qovluq”, məsələn saytınızın URL-i. Burada originlər haqqında daha çox oxuyun.

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

Addım 3: TacoTranslate-in 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ı 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ı 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 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 xüsusi pageProps və _app.tsx fayllarınız varsa, zəhmət olmasa, yuxarıdakı xüsusiyyətlər və kod ilə tərifi genişləndirin.

4-cü Addım: Server tərəfi renderin həyata keçirilməsi

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 yerinə, tərcümə olunmuş məzmun dərhal göstərilir. Bundan əlavə, müştəri tərəfində şəbəkə sorğularını ötürə bilərik, çünki artıq ehtiyac duyduğumuz bütün tərcümələr mövcuddur.

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ğunlaşdırın. Əgər true olarsa, TacoTranslate açıq 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ətirlərin tərcümə üçün göndərildiyindən ə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. Növbəti edəcəyimiz şey bütün səhifələriniz üçün tərcümələri gətirməkdir. Bunu etmək üçün tələblərinizə əsasən getTacoTranslateStaticProps və ya getTacoTranslateServerSideProps istifadə edəcəksiniz.

Bu funksiyalar üç arqument qəbul edir: Bir Next.js Static Props Context obyekti, TacoTranslate üçün konfiqurasiya və isteğe bağlı Next.js xüsusiyyətləri. Qeyd edin ki, getTacoTranslateStaticProps funksiyasında revalidate varsayılan olaraq 60-a təyin olunub, beləliklə tərcümələriniz daim güncəldə qalır.

Hər iki funksiyanı bir səhifədə istifadə etmək üçün, gəlin belə 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əki sətirləri tərcümə edə bilməlisiniz.

import {Translate} from 'tacotranslate/react';

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

5-ci Addım: Yerləşdirin və yoxlayın!

Biz işimizi bitirdik! İndi sizin React tətbiqiniz Translate komponentinə hər hansı bir sətri əlavə etdiyiniz zaman avtomatik tərcümə olunacaq. Qeyd edin ki, yalnız read/write icazələrinə malik olan mühitlər API açarı ilə tərcümə olunacaq yeni sətrləri yarada biləcəklər. Tövsiyə edirik ki, belə bir API açarı ilə istehsal tətbiqinizi sınaqdan keçirmək üçün bağlanmış və təhlükəsiz bir staging mühiti saxlayasınız və canlıya çıxmadan əvvəl yeni sətrləri əlavə edəsiniz. Bu, heç kimin gizli API açarınızı oğurlamasının qarşısını alacaq və potensial olaraq tərcümə layihənizin yeni, əlaqəsiz sətrlərlə şişməsinin qarşısını alacaq.

Əmin olun ki, 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ısa 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 istənilən dildən və dilə avtomatik olaraq sürətli şəkildə lokalizasiya etməyə imkan verir. Bu gün başlayın!