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

Dünya daha da qloballaşdıqca, veb inkişaf etdiricilər üçün müxtəlif ölkə və mədəniyyətlərdən olan istifadəçilərə xidmət edə bilən tətbiqlər yaratmaq getdikcə daha vacib olur. Bunu əldə etməyin əsas yollarından biri beynəlmiləlləşdirmə (i18n)-dir; bu, 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əfli render (server side rendering) ilə birlikdə beynəlmiləlləşdirməni necə əlavə edəcəyimizi araşdıracağıq. TL;DR: Tam nümunəni burada görün.

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

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

Next.js tətbiqinizdə beynəlxalqlaşdırmanı (i18n) 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 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 artıq 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. Buradan hesab yaradın. Pulsuzdur və kredit kartı əlavə etməyinizi tələb etmir.

TacoTranslate tətbiqinin istifadəçi interfeysində bir layihə yaradın və onun API açarları sekməsinə keçin. 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ı bizim public adlandırdığımız açardır, read/write açarı isə secret adlandırdığımız açardı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ı müştəri tərəfi istehsal mühitlərinə heç vaxt sızdırmayın.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Varsayılan əvəzetmə (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 saytınızın URL-i. Originlər haqqında daha çox məlumat üçün buraya baxın.

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

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

Tətbiqinizə TacoTranslate-i inteqrasiya etmək üçün əvvəlki API açarlarınızdan istifadə edərək bir klient 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ə TACOTRANSLATE_API_KEY avtomatik olaraq təyin edəcəyik.

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

Step 4: Server tərəfi renderləşdirmənin tətbiqi

TacoTranslate tərcümələrinizin server tərəfdən render edilməsinə imkan verir. Bu, istifadəçi təcrübəsini xeyli yaxşılaşdırır — tərcümə olunmuş məzmunu dərhal göstərərək əvvəlcə tərcümə olunmamış məzmunun qısa müddətli görünməsinin qarşısını alır. Bundan əlavə, artıq bütün lazımi tərcümələrə sahib olduğumuz üçün klient tərəfində şəbəkə sorğularını atlaya bilərik.

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'),
	});
};

Quraşdırmanıza uyğunlaşdırmaq üçün isProduction yoxlamasını dəyişdirin. Əgər true, TacoTranslate ictimai API açarını göstərəcək. Əgər 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 məxfi 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. İndi növbəti addım 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 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ə seçimli Next.js xassələri. Qeyd edin ki, getTacoTranslateStaticProps daxilində revalidate standart olaraq 60-a təyin olunub, beləliklə tərcümələriniz güncəl qalır.

Hər hansı funksiyanı bir səhifədə istifadə etmək üçün, gəlin belə bir səhifə faylınız olduğunu fərz edək: /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 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!"/>
}

5-ci addım: Yayımlayın və sınaqdan keçirin!

Bitirdik! React tətbiqiniz indi Translate komponentinə hər hansı mətn əlavə etdiyiniz zaman avtomatik tərcümə olunacaq. Qeyd: yalnız API açarında read/write icazəsi olan mühitlər yeni tərcümə olunacaq mətnlər yarada biləcək. Belə bir API açarı ilə tətbiqinizi canlıya çıxmazdan əvvəl yeni mətnlər əlavə edib sınaqdan keçirə biləcəyiniz, bağlanmış və təhlükəsiz bir sınaq mühiti saxlamanızı tövsiyə edirik. Bu, heç kəsin gizli API açarınızı oğurlamasının və əlavə, əlaqəsiz mətnlər əlavə edərək tərcümə layihənizi şişirtməsinin qarşısını alacaq.

GitHub profilimizdə tam nümunəni mütləq yoxlayın. Orada həmçinin bunu App Router istifadə edərək necə edəcəyinizə dair bir nümunə də tapa bilərsiniz! Hər hansı bir problemə rast gəlsəniz, bizimlə əlaqə saxlayın, məmnuniyyətlə kömək edəcəyik.

TacoTranslate React tətbiqlərinizi avtomatik olaraq 75-dən çox dilə və bu dillərdən çevirməyə imkan verir. Bu gün başlayın!