Next.js tətbiqində, Pages Router istifadə edən bir layihədə beynəlxalqlaşdırmanı (i18n) necə tətbiq etmək olar

Dünya daha qlobal olduqca, veb inkişaf etdiricilər üçün müxtəlif ölkə və mədəniyyətlərdən olan istifadəçilərin ehtiyaclarına cavab verə bilən tətbiqlər yaratmaq getdikcə daha vacib olur. Bunu təmin etməyin əsas yollarından biri beynəlxalqlaşdırmadır (i18n); bu, tətbiqinizi müxtəlif dillərə, valyutalara və tarix formatlarına uyğunlaşdırmağa imkan verir.

Bu dərslikdə biz React Next.js tətbiqinizə server tərəfli renderləşmə ilə birlikdə beynəlxalqlaşdırmanı necə əlavə etməyi 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.

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

Next.js tətbiqinizdə beynəlxalqlaşdırmanı (i18n) tətbiq etmək üçün əvvəlcə bir i18n kitabxanası seçəcəyik. Bir neçə populyar kitabxana mövcuddur, o cümlədən next-intl. Lakin, bu nümunədə biz TacoTranslate-dən istifadə edəcəyik.

TacoTranslate qabaqcıl 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 cansıxıcı idarə edilməsindən azad edir.

Gəlin onu terminalınızda npm vasitəsilə quraşdıraq:

npm install tacotranslate

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

Modulu quraşdırdığınıza görə, indi TacoTranslate hesabınızı, tərcümə layihənizi və əlaqəli API açarlarını yaratmağın vaxtıdır. Buradan 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ı 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 qovluğundakı .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əfindəki istehsal mühitlərinə 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: Defolt (fallback) lokal kodu. Bu nümunədə onu İngilis dili üçün en olaraq təyin edəcəyik.
• TACOTRANSLATE_ORIGIN: Sətirlərinizin saxlanılacağı “qovluq”, məsələn veb saytınızın URL-si. Burada originlər haqqında daha çox oxuyun.

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

Addım 3: TacoTranslate-i quraşdırmaq

TacoTranslate-i tətbiqinizə inteqrasiya etmək üçün əvvəlki API açarlarından istifadə edərək bir klient yaratmalısınız. Məsələn, /tacotranslate-client.js.

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;

Tezliklə TACOTRANSLATE_API_KEY avtomatik olaraq təyin edəcəyik.

Klienti ayrıca 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 xüsusi pageProps və _app.tsx varsa, zəhmət olmasa tərifə yuxarıdakı xüsusiyyətləri və kodu əlavə edin.

4-cü addım: Server tərəfdən renderləməni tətbiq etmək

TacoTranslate tərcümələrinizin server tərəfdə render olunmasına imkan verir. Bu, əvvəlcə qısa müddət üçün tərcüməsiz məzmunun görünməsi əvəzinə tərcümə olunmuş məzmunu dərhal göstərərək istifadəçi təcrübəsini xeyli yaxşılaşdırır. Əlavə olaraq, biz 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ə malikik.

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

Konfiqurasiyanıza uyğun olaraq isProduction yoxlamasını dəyişdirin. Əgər true, TacoTranslate ictimai API açarını göstərəcək. Əgər biz yerli, test və ya staging mühitindəyiksə (isProduction is false), yeni mətnlərin tərcümə üçün göndərildiyinə əmin olmaq üçün gizli read/write API açarından istifadə edəcəyik.

İndiyədək yalnız Next.js tətbiqini 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 xüsusiyyətləri. Qeyd edək ki, revalidate getTacoTranslateStaticProps daxilində standart olaraq 60-a təyin edilib, beləliklə tərcümələriniz güncəl qalır.

Səhifədə hər iki funksiyanı istifadə etmək üçün, fərz 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 Translate komponentindən bütün React komponentlərinizdəki mətnlə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: Yayımlayın və sınaqdan keçirin!

Bitirdik! React tətbiqiniz indi Translate komponentinə istənilən sətir əlavə etdiyiniz zaman 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əklər. Belə bir API açarı ilə istehsal tətbiqinizi test edə biləcəyiniz bağlı və təhlükəsiz bir staging mühiti yaratmağı tövsiyə edirik — yeni sətirləri canlıya çıxmazdan əvvəl ora əlavə edin. Bu, gizli API açarınızın kimsə tərəfindən oğurlanmasının və tərcümə layihənizin əlaqəsiz yeni sətirlərlə şişməsinin qarşısını alacaq.

Mütləq GitHub profilimizdəki tam nümunəni yoxlayın. Orada bunu App Router ilə necə edəcəyinizə dair bir nümunə də tapa bilərsiniz! Əgər hər hansı problem yaşasanız, bizə müraciət etməkdən çəkinməyin, biz kömək etməkdən məmnun olarıq.

TacoTranslate React tətbiqlərinizi 75-dən çox dilə və onlardan avtomatik və sürətli şəkildə lokallaşdırmağa imkan verir. Bu gün başlayın!