Next.js tətbiqində, Pages Router istifadə edən bir tətbiqdə beynəlxalqlaşdırma necə həyata keçirilir

Dünya daha qloballaşdıqca, veb tərtibatçıların müxtəlif ölkə və mədəniyyətlərdən olan istifadəçilərə uyğun tətbiqlər yaratması getdikcə daha vacib olur. Bunu həyata keçirməyin əsas yollarından biri beynəlxalqlaşdırmadır (i18n), bu isə 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 renderinq ilə beynəlxalqlaşdırmanı necə əlavə edəcəyimizi araşdıracağıq. TL;DR: Tam nümunəni buradan izləyin.

Bu bələdçi Pages Router istifadə edən Next.js tətbiqləri üçün nəzərdə tutulub.
Əgər App Router istifadə edirsinizsə, xahiş edirik bunun 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ə bir i18n kitabxanası seçəcəyik. Populyar kitabxanalardan bəziləri arasında next-intl də var. Lakin bu nümunədə biz TacoTranslate istifadə edəcəyik.

TacoTranslate qabaqcıl AI 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 onu npm vasitəsilə 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, TacoTranslate hesabı, tərcümə layihəsi və əlaqəli API açarlarını yaratmaq vaxtıdır. Burada hesab yaradın. Bu pulsuzdur və kredit karta ehtiyacınız yoxdur.

TacoTranslate tətbiqetmə İİ-də bir layihə yaradın və onun API açarları sekmesine keçin. Bir read açarı və bir read/write açarı yaradın. Biz onları 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

Müştəri tərəfi istehsal mühitlərinə heç vaxt gizli read/write API açarını açıqlamamağa diqqət edin.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Əsas ehtiyat dil kodu. Bu nümunədə, onu ingilis dili üçün en olaraq təyin edəcəyik.
• TACOTRANSLATE_ORIGIN: Sətirlərinizin saxlanacağı “qovluq”, məsələn, veb saytınızın URL-i. Burada orijinlər haqqında daha çox oxuyun.

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

3-cü addım: TacoTranslate qurulması

TacoTranslate-i tətbiqinizlə 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 yaxın vaxtlarda avtomatik olaraq TACOTRANSLATE_API_KEY təyin edəcəyik.

Müştərini ayrıca faylda yaratmaq onu daha sonra yenidən istifadə etməyi asanlaşdırır. İndi isə, 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 yuxarıdakı xüsusiyyətlər və kod ilə tərifi genişləndirin.

4-cü Addım: Server tərəfi rendering-in tətbiqi

TacoTranslate tərcümələrinizin server tərəfdə render olunmasına imkan verir. Bu, istifadəçi təcrübəsini əhəmiyyətli dərəcədə 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 yanıb-sönməsi yerinə. Əlavə olaraq, müştəridə şəbəkə sorğularını keçə bilərik, çünki artıq ehtiyacımız olan bütün tərcümələrimiz var.

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ğun dəyişdirin. Əgər true olarsa, TacoTranslate ictimai API açarını göstərəcək. Əgər yerli, test və ya staging mühitindəyiksə (isProduction is false), yeni sətirlərin tərcüməyə göndərildiyindən əmin olmaq üçün gizli read/write API açarını istifadə edəcəyik.

İndiyədək biz Next.js tətbiqini yalnız dəstəklənən dillərin siyahısı ilə qurmuşuq. İndi isə növbəti addım olaraq bütün səhifələriniz üçün tərcümələri əldə edəcəyik. Bunu etmək üçün tələblərinizə əsasən getTacoTranslateStaticProps və ya getTacoTranslateServerSideProps funksiyalarından birini istifadə edəcəksiniz.

Bu funksiyalar üç arqument qəbul edir: Bir Next.js Static Props Context obyekti, TacoTranslate üçün konfiqurasiya və seçmə Next.js xassələri. Qeyd edin ki, getTacoTranslateStaticProps üzərində revalidate standart olaraq 60-a təyin olunub ki, tərcümələriniz güncəl qalsın.

Hər iki funksiyanı səhifədə istifadə etmək üçün, gəlin belə bir səhifə faylınızın 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ə 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: Yerləşdirin və sınayın!

Biz işimizi bitirdik! İndi React tətbiqinizdə Translate komponentinə istənilən mətn əlavə etdikdə, o avtomatik tərcümə olunacaq. Qeyd edək ki, yalnız read/write icazələrinə sahib API açarı ilə işləyən mühitlər yeni tərcümə olunacaq mətnləri yarada biləcəklər. Biz tövsiyə edirik ki, bağlı və təhlükəsiz bir staging mühiti yaradıb, orada istehsal (production) tətbiqinizi belə bir API açarı ilə sınaqdan keçirin və canlı yayına getmədən əvvəl yeni mətnlər əlavə edin. Bu, gizli API açarınızın oğurlanmasının qarşısını alacaq və tərcümə layihənizə yeni, əlaqəsiz mətnlərin əlavə olunaraq səhvən şişməsinin qarşısını alacaq.

Əmin olun ki, GitHub profilimizdə tam nümunəyə baxasınız. Orada, App Router istifadə edən nümunəni də tapa bilərsiniz! Hər hansı bir problem yaşasanız, bizə müraciət etməkdən çəkinməyin, sizə məmnuniyyətlə kömək edərik.

TacoTranslate sayəsində React tətbiqlərinizi 75-dən çox dilə və onlardan avtomatik olaraq sürətlə lokalizasiya edə bilərsiniz. Bugündən başlayın!