Next.js tətbiqində Pages Router istifadə edən bir tətbiqdə beynəlxalqləşməni (i18n) necə həyata keçirmək

Dünya daha da qloballaşdıqca, veb inkişaf etdiriciləri üçün müxtəlif ölkə və mədəniyyətlərdən olan istifadəçilərə uyğun tətbiqlər yaratmaq getdikcə daha vacib olur. Buna nail olmağın əsas yollarından biri beynəlmiləlləşdirmə (i18n) vasitəsilə tətbiqinizi fərqli dillərə, valyutalara və tarix formatlarına uyğunlaşdırmaqdır.

Bu təlimatda, React Next.js tətbiqinizə server tərəfli render (server side rendering) ilə beynəlmiləlləşdirməni necə əlavə edəcəyimizi 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ə, 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ı tətbiq etmə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.

TacoTranslate ən son süni intellektdən istifadə edərək sətirlə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 onu terminalınızda npm ilə quraşdıraq:

npm install tacotranslate

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

İndi modulu quraşdırdığınıza görə, TacoTranslate hesabınızı, bir tərcümə layihəsini və əlaqəli API açarlarını yaratmağın vaxtıdır. Burada hesab yaradın. Bu 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ı bölmə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ına public deyirik, 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

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

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

• TACOTRANSLATE_DEFAULT_LOCALE: Varsayılan ehtiyat yerli dil 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 ətraflı məlumatı burada oxuyun.

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

3-cü addım: 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ı 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 qısa müddətdə TACOTRANSLATE_API_KEY avtomatik olaraq təyin edəcəyik.

Klientin ayrı bir faylda yaradılması onu sonradan yenidən istifadə etməyi asanlaşdırır. İndi, xüsusi /pages/_app.tsx, 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 xüsusi pageProps və _app.tsx varsa, zəhmət olmasa tərifi yuxarıdakı xüsusiyyətlər və kodla genişləndirin.

Addım 4: Server tərəfli renderin 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: əvvəlcə tərcümə olunmamış məzmunun qısa görünməsi əvəzinə tərcümə olunmuş məzmun dərhal göstərilir. Bundan əlavə, müştəri tərəfində şəbəkə sorğularını atlaya bilərik, çünki artıq lazım olan bütün tərcümələrə sahibik.

Gəlin /next.config.js faylını yaradaraq və ya dəyişdirərək başlayaq.

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

Konfiqurasiyanıza uyğun olaraq isProduction yoxlamasını dəyişdirin. Əgər true olarsa, TacoTranslate ictimai API açarını göstərəcək. Əgər biz yerli, test, və ya staging mühitində oluruqsa (isProduction is false), yeni mətnlərin tərcüməyə 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ə konfiqurasiya etmişik. İndi edəcəyimiz növbəti iş bütün səhifələriniz üçün tərcümələri çəkmə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: biri Next.js Static Props Context obyekti, TacoTranslate üçün konfiqurasiya və istəyə bağlı Next.js xüsusiyyətləri. Qeyd edin ki, revalidate getTacoTranslateStaticProps üçün varsayılan olaraq 60-a təyin edilib, beləliklə tərcümələriniz güncəl qalır.

Hər hansı bir funksiyanı bir səhifədə istifadə etmək üçün, gəlin qəbul 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ə 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!"/>
}

Addım 5: Yerləşdirin və sınaqdan keçirin!

Bitirdik! İndi React tətbiqinizdə Translate komponentinə hər hansı sətiri əlavə etdiyiniz zaman o, avtomatik olaraq tərcümə olunacaq. Qeyd edin ki, yalnız API açarında read/write icazələri olan mühitlər tərcümə üçün yeni sətirlər yarada biləcək. Belə bir API açarı ilə istehsal tətbiqinizi sınaqdan keçirə biləcəyiniz və yeni sətirləri canlıya keçməzdən əvvəl əlavə edə biləcəyiniz qapalı və təhlükəsiz bir staging mühitinə sahib olmağı tövsiyə edirik. Bu, gizli API açarınızın oğurlanmasının qarşısını alacaq və həmçinin yeni, əlaqəsiz sətirlərin əlavə olunması ilə tərcümə layihənizin şişməsinin qarşısını alacaq.

Mütləq tam nümunəyə nəzər yetirin GitHub profilimizdə. Orada, bunu App Router istifadə edərək necə edəcəyinizə dair bir nümunə də tapa bilərsiniz! Əgər hər hansı bir problemlə qarşılaşsanız, bizimlə əlaqə saxlamaqdan çəkinməyin; sizə məmnuniyyətlə kömək edəcəyik.

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