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

Necə işləyir

Dünya daha çox qloballaşdıqca, veb inkişaf etdiricilər üçün fərqli ölkələrdən 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)-dir; bu, 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əfdən render etməklə beynəlmiləlləşdirməni necə əlavə etməyi araşdıracağıq. 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 üçündür.
Əgər App Router istifadə edirsinizsə, bunun əvəzinə bu bələdçiyə baxın.

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

Next.js tətbiqinizdə beynəlxalqlaşdırmanı (i18n) həyata keçirmə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 istifadə edəcəyik.

TacoTranslate qabaqcıl süni intellektdən 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 terminalınızda npm ilə quraşdıraq:

npm install tacotranslate

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

Modulu artıq 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ı sekmə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ını biz public adlandırırıq, read/write açarı isə secret adlandırılır. Məsələn, bunları 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ı müştəri tərəfi istehsal mühitlərinə heç vaxt sızdırmadığınızdan əmin olun.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Standart (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-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-i qurmaq

TacoTranslate-i tətbiqinizə inteqrasiya etmək üçün əvvəl yaratdığınız 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 TACOTRANSLATE_API_KEY tezliklə avtomatik olaraq təyin edəcəyik.

Klienti ayrı faylda yaratmaq onu sonra təkrar istifadə etməyi asanlaşdırır. İndi xüsusi /pages/_app.tsx istifadə edərək, biz 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 edilməsinə imkan verir. Bu, tərcümə olunmamış məzmunun əvvəlcə 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. Bundan əlavə, müştəri tərəfində şəbəkə sorğularını atlaya bilərik, çünki ehtiyac duyduğumuz bütün tərcümələr artıq bizdə 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'),
	});
};

Konfiqurasiyanıza uyğunlaşdırmaq üçün 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əyiksə (isProduction is false), yeni mətnlərin tərcüməyə göndərilməsini təmin etmək üçü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ə qurmuşuq. Növbəti addım bütün səhifələriniz üçün tərcümələri gətirməkdir. Bunu etmək üçün tələblərinizə əsasən ya getTacoTranslateStaticProps ya da getTacoTranslateServerSideProps istifadə edəcəksiniz.

Bu funksiyalar üç arqument alır: biri Next.js Static Props Context obyekti, TacoTranslate üçün konfiqurasiya və istəyə bağlı Next.js xassələri. Qeyd edin ki, revalidate getTacoTranslateStaticProps üzərində standart olaraq 60-a təyin olunub, buna görə tərcümələriniz güncəldə qalır.

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

Addım 5: Yayımlayın və sınaqdan keçirin!

Bitirdik! Next.js tətbiqiniz indi Translate komponentinə hər hansı sətirlər əlavə etdiyiniz zaman avtomatik olaraq tərcümə olunacaq. Qeyd edin ki, API açarında read/write icazələrə malik olan mühitlər yalnız tərcümə üçün yeni sətirlər yarada biləcəklər. Belə bir API açarı ilə istehsal tətbiqinizi sınaya biləcəyiniz, canlıya keçməzdən əvvəl yeni sətirlər əlavə etdiyiniz bağlı və təhlükəsiz bir staging mühiti saxlamanızı tövsiyə edirik. Bu, heç kimin gizli API açarınızı oğurlamasının və potensial olaraq yeni, əlaqəsiz sətirlər əlavə edərək tərcümə layihənizi şişirtmə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!