Next.js tətbiqlərində beynəlxalqlaşdırma (i18n) üçün ən yaxşı həll yolu

Necə işləyir

Dünya daha qloballaşdıqca, veb inkişaf etdiricilər üçün fərqli ölkə və mədəniyyətlərdən olan istifadəçilərə xidmət göstərən tətbiqlər yaratmaq daha da vacib olur. Bunu həyata keçirməyin əsas yollarından biri beynəlxalqlaşdırmadır (i18n), bu da tətbiqinizi fərqli 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 renderinq ilə necə beynəlxalqlaşdırma əlavə ediləcəyini araşdıracağıq. TL;DR: Tam nümunəyə buradan baxın.

Bu bələdçi Pages Router istifadə edən Next.js tətbiqləri üçündür.
Əgər App Router istifadə edirsinizsə, xahiş edirik 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ə 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ə JSON fayllarının yorucu idarə edilməsindən sizi azad edir.

Gəlin onu terminalda npm istifadə edərək quraşdıraq:

npm install tacotranslate

Addım 2: Ödənişsiz TacoTranslate hesabı yaradın

İndi modul quraşdırılıb, TacoTranslate hesabınızı, tərcümə layihəsini və əlaqəli API açarlarını yaratmaq vaxtıdır. Burada 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ı bölməsinə 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ını public adlandırırıq, 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ı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: Varsayılan geri dönmə yerli kodu. Bu nümunədə, onu İngilis dili üçün en olaraq təyin edəcəyik.
• TACOTRANSLATE_ORIGIN: Sözlərinizin saxlanacağı “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

3-cü Addım: TacoTranslate-in Qurulması

TacoTranslate-ni tətbiqinizə inteqrasiya etmək üçün daha əvvəldən API açarlarını istifadə edərək bir müştəri yaratmaq lazım gələcək. Məsələn, /tacotranslate-client.jsadlı 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ət ərzində avtomatik olaraq TACOTRANSLATE_API_KEY təyin edəcəyik.

Müştərini ayrıca 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 sizin artıq özəl 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.

Addım 4: Server tərəfli renderin tətbiqi

TacoTranslate tərcümələrinizin server tərəfində render olunmasına imkan verir. Bu, istifadəçi təcrübəsini çox yaxşılaşdırır, çünki tərcümə olunmuş məzmun dərhal göstərilir, əvvəlcə tərcümə olunmamış məzmunun qısa yanıb-sönməsi əvəzinə. Əlavə olaraq, 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ə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 quraşdırmanıza 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ətirlə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 biz Next.js tətbiqini yalnız dəstəklənən dillərin siyahısı ilə qurmuşuq. Növbəti addım isə bütün səhifələriniz üçün tərcümələri götürməkdir. Bunu etmək üçün tələblərinizə əsaslanaraq ya getTacoTranslateStaticProps, ya da 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 üzərində revalidate defolt olaraq 60-a təyin olunub, beləliklə tərcümələriniz daim yenilənir.

Hər hansı bir funksiyanı səhifədə istifadə etmək üçün, tutaq ki, sizin /pages/hello-world.tsx adlı 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 bütün React komponentlərinizdəki sətirləri tərcümə etmək üçün istifadə edə bilməlisiniz.

import {Translate} from 'tacotranslate/react';

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

5-ci Addım: Yerləşdir və test et!

Biz işimizi başa çatdırdıq! İndi Next.js tətbiqinizdə hər hansı bir mətn parçasını Translate komponentinə əlavə etdiyiniz zaman avtomatik olaraq tərcümə olunacaq. Qeyd edin ki, yalnız read/write icazələrinə malik olan mühitlər API açarı ilə yeni tərcümə olunacaq mətnləri yarada biləcəklər. İstehsal tətbiqinizi belə bir API açarı ilə yoxlamaq və canlı yayıma başlamazdan əvvəl yeni mətnlər əlavə etmək üçün bağlanmış və təhlükəsiz bir sınaq (staging) mühitinin olması tövsiyə olunur. Bu, gizli API açarınızın oğurlanmasının qarşısını alacaq və mümkün qədər yeni, əlaqəsiz mətnlərin əlavə olunması ilə tərcümə layihənizin şişməsinin qarşısını alacaq.

Əmin olun ki, GitHub profilimizdə tam nümunəni yoxlayasınız. Orada, həmçinin App Router istifadə edərək bunu necə edəcəyinizə dair bir nümunə tapacaqsınız! Əgər hər hansı bir problem ilə qarşılaşsanız, bizimlə əlaqə saxlayın, və biz sizə kömək etməkdən məmnun olarıq.

TacoTranslate React tətbiqlərinizi istənilən dilə və istənilən dildən avtomatik surətdə sürətli lokalizasiya etməyə imkan verir. Bugün başlayın!