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

Necə işləyir

Dünya daha da qloballaşdıqca, veb inkişafçılar üçün müxtəlif ölkələrdən və mədəniyyətlərdən olan istifadəçilərə uyğunlaşa bilən tətbiqlər yaratmaq getdikcə daha vacib olur. Bunu əldə etmə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əfində təsvir etməklə beynəlxalqlaşdırmanı necə əlavə etməyi öyrənəcəyik. TL;DR: Tam nümunəni buradan görün.

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ə, zəhmət olmasa onun üçün nəzərdə tutulmuş bələdçiyə baxın.

Addım 1: 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. Bir neçə populyar kitabxana var, o cümlədən next-intl. Lakin, bu nümunədə, biz TacoTranslate istifadə edəcəyik.

TacoTranslate qabaqcıl AI-dan istifadə edərək sətirlərinizi avtomatik olaraq istənilən dilə tərcümə edir və sizi JSON fayllarının yorucu idarə edilməsindən azad edir.

Gəlin bunu terminalınızda npm ilə quraşdıraq:

npm install tacotranslate

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

İndi modul quraşdırıldığından, TacoTranslate hesabınızı, tərcümə layihənizi 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ətbiqi istifadəçi interfeysində bir layihə yaradın və onun API açarları sekmesine 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ına biz public deyirik, read/write açarı isə secret adlanı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

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

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 ehtiyat yerli kodu. Bu nümunədə onu en İngilis dili üçün təyin edəcəyik.
• TACOTRANSLATE_ORIGIN: Sətirlərinizin saxlanılacağı “qovluq”, məsələn, saytınızın URL-i. İstiqamətlər haqqında daha çox buradan oxuyun.

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

3-cü addım: TacoTranslate 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.

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 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 fayllarınız varsa, zəhmət olmasa yuxarıdakı tərif və kodla onları genişləndirin.

4-cü addım: Server tərəfli renderləmənin 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ə edilmiş məzmun dərhal göstərilir, əvvəlcə tərcümə olunmamış məzmunun yanıp-sönməsi əvəzinə. Əlavə olaraq, biz müştəri tərəfində şəbəkə sorğularını atlaya 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.

İndiyə qədər Next.js tətbiqini yalnız dəstəklənən dillərin siyahısı ilə qurduq. Növbəti edəcəyimiz iş bütün səhifələriniz üçün tərcümələri əldə etməkdir. Bunu etmək üçün tələblərinizə əsaslanaraq 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ə əlavə olaraq Next.js xüsusiyyətləri. Qeyd edin ki, revalidate getTacoTranslateStaticProps üzərində standart olaraq 60-a təyin edilib, bu da tərcümələrinizin daim yenilənməsini təmin edir.

Hər iki funksiyanı səhifədə istifadə etmək üçün təsəvvür edək ki, /pages/hello-world.tsx adlı bir 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 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: Yerləşdirin və sınaqdan keçirin!

Biz işimizi bitirdik! İndi Next.js tətbiqinizdə Translate komponentinə hər hansı bir sətir əlavə etdiyiniz zaman avtomatik olaraq tərcümə olunacaq. Diqqət yetirin ki, yalnız read/write icazələrinə malik API açarı olan mühitlər tərcümə üçün yeni sətirlər yarada biləcəklər. Töhfə vermədən əvvəl yeni sətirlər əlavə edərək istehsal tətbiqinizi belə bir API açarı ilə sınaqdan keçirmək üçün bağlı və təhlükəsiz bir mərhələləndirmə (staging) mühitinin olması tövsiyə olunur. Bu, gizli API açarınızın oğurlanmasının qarşısını alacaq və potensial olaraq tərcümə layihənizin əlaqəsiz yeni sətirlərlə şişməsinin qarşısını alacaq.

Be sure to check out the complete example over at our GitHub profile. There, you’ll also find an example of how to do this using the App Router! If you encounter any problems, feel free to reach out, and we’ll be more than happy to help.

TacoTranslate lets you automatically localize your React applications quickly to and from over 75 languages. Get started today!