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

Necə işləyir

Dünya daha da qloballaşdıqca, veb inkişaf etdiricilər üçün müxtəlif ölkə və mədəniyyətlərdən olan istifadəçilərə uyğun tətbiqlər yaratmaq getdikcə daha vacib olur. Bunun əldə edilməsinin əsas yollarından biri beynəlxalqlaşdırma (i18n)-dır, bu da tətbiqinizi müxtəlif dillərə, valyutalara və tarix formatlarına uyğunlaşdırmağa imkan verir.

Bu dərslikdə server tərəfi renderləmə ilə React Next.js tətbiqinizə necə beynəlxalqlaşdırma əlavə edəcəyimizi araşdıracağıq. TL;DR: Tam nümunəni burada 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: i18n kitabxanası 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 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.

Terminalınızda npm istifadə edərək onu quraşdıraq:

npm install tacotranslate

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

Modulu quraşdırdığınıza görə, indi TacoTranslate hesabı, tərcümə layihəsi və əlaqəli API açarlarını yaratmağın vaxtıdır. Hesabınızı buradan 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ə API açarları sekmə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ı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

Gizli read/write API açarını müştəri tərəfdəki istehsal mühitlərinə heç vaxt sızdırmayın.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Standart ehtiyat lokal kodu. Bu nümunədə bunu İngilis dili üçün en olaraq təyin edəcəyik.
• TACOTRANSLATE_ORIGIN: Sətirlərinizin saxlanılacağı “qovluq”, məsələn saytınızın URL-i. Orijinlər haqqında daha çox 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əlki API açarlarından istifadə edərək bir klient 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;

Tezliklə TACOTRANSLATE_API_KEY avtomatik olaraq təyin ediləcək.

Clientin ayrı faylda yaradılması onu sonradan yenidən istifadə etməyi asanlaşdırır. İndi xüsusi /pages/_app.tsx-dən istifadə edərək, TacoTranslate provideri ə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.

4-cü addım: Server tərəfli renderin tətbiqi

TacoTranslate tərcümələrinizi server tərəfdən render etməyə imkan verir. Bu, istifadəçi təcrübəsini xeyli yaxşılaşdırır: tərcümə olunmuş məzmun dərhal göstərilir və əvvəlcə tərcümə olunmamış məzmunun qısa görünməsi baş vermir. Əlavə olaraq, bütün lazımi tərcümələrimiz artıq mövcud olduğundan, klient tərəfdə şəbəkə sorğularını atlamaq olar.

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 lokal, test və ya staging mühitində olsaq (isProduction is false), yeni sətirlə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.

Indiyə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ımız 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 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ə seçimli Next.js xüsusiyyətləri. Qeyd edin ki, getTacoTranslateStaticProps üzərində revalidate standart olaraq 60-a təyin edilib, beləliklə tərcümələriniz güncəl qalacaq.

Hər hansı funksiyanı səhifədə istifadə etmək üçün, gəlin farz edək ki, sizin /pages/hello-world.tsx kimi 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!"/>;
}

Artıq 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: Yerləşdirin və sınaqdan keçirin!

Bitirdik! İndi Next.js tətbiqinizdə Translate komponentinə hər hansı mətn əlavə etdiyiniz zaman mətnlər avtomatik olaraq tərcümə ediləcək. Qeyd edin ki, yalnız API açarı üçün read/write icazələrinə malik mühitlər tərcümə üçün yeni mətnlər yarada bilərlər. İstehsal tətbiqinizi belə bir API açarı ilə sınaqdan keçirə biləcəyiniz və yeni mətnləri canlıya çıxmazdan əvvəl əlavə edə biləcəyiniz bağlı və təhlükəsiz bir staging (sınaq) mühiti saxlamağı tövsiyə edirik. Bu, gizli API açarınızın heç kəs tərəfindən oğurlanmasının qarşısını alacaq və eyni zamanda yeni, əlaqəsiz mətnlərin əlavə edilməsi ilə tərcümə layihənizin şişməsinin qarşısını ala bilər.

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!