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

Necə işləyir

Dünya 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ğunlaşa bilən tətbiqlər yaratmaq getdikcə daha vacib olur. Bunlardan birinə nail olmağın əsas yollarından biri beynəlxalqlaşdırma (i18n)-dır; 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ə render etmə ilə beynəlxalqlaşdırmanı necə əlavə edəcəyimizi 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: Bir i18n kitabxanası quraşdırın.

Next.js tətbiqinizə beynəlxalqlaşdırmanı (i18n) tətbiq etmə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 terminalınızda bunu npm vasitəsilə 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ınızı, tərcümə layihənizi 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ə onun 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ı 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ı müştəri tərəfdəki istehsal mühitlərinə heç vaxt sızdırmadığınızdan əmin olun.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Varsayılan ehtiyat (fallback) lokal kodu. Bu nümunədə onu ingilis 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. Originlər haqqında daha ətraflı məlumatı burada oxuyun.

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

Addım 3: TacoTranslate-i qurmaq

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;

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

Klienti ayrı bir faylda yaratmaq onu daha sonra yenidən istifadə etməyi asanlaşdırır. İndi 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 öz xüsusi pageProps və _app.tsx fayllarınız varsa, zəhmət olmasa tərifi yuxarıdakı xüsusiyyətlər və kodla genişləndirin.

Addım 4: Server tərəfdən renderləməni tətbiq etmək

TacoTranslate tərcümələrinizin server tərəfdən render olunmasına imkan verir. Bu, istifadəçi təcrübəsini xeyli yaxşılaşdırır — əvvəlcə tərcümə olunmamış məzmunun qısa müddətlik görünməsi əvəzinə tərcümə olunmuş məzmun dərhal göstərilir. Bundan əlavə, müştəri tərəfində şəbəkə sorğularını atlaya bilərik, çünki artıq ehtiyac duyduğumuz bütün tərcümələr mövcuddur.

Başlayaq /next.config.js faylını yaradaraq və ya dəyişdirərək.

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

Sazlamalarınıza uyğun gəlməsi üçün isProduction yoxlamasını dəyişdirin. Əgər true, TacoTranslate ictimai API açarını göstərəcək. Əgər lokal, test və ya staging mühitindəyiksə (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.

İndiyədək Next.js tətbiqini yalnız dəstəklənən dillərin siyahısı ilə konfiqurasiya etmişik. Növbəti addım bütün səhifələriniz üçün tərcümələri çəkməkdir. 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ə ixtiyari Next.js parametrləri. Qeyd edin ki, revalidate getTacoTranslateStaticProps üçün varsayılan olaraq 60-a təyin olunub, buna görə də tərcümələriniz güncəl qalır.

Səhifədə hər hansı bir funksiyadan istifadə etmək üçün gəlin belə qəbul 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!"/>;
}

İ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!"/>
}

Addım 5: Yerləşdirin və test edin!

Hazırıq! Next.js tətbiqinizdə Translate komponentinə hər hansı mətn əlavə etdiyiniz zaman həmin mətnlər avtomatik olaraq tərcümə olunacaq. Qeyd edin ki, yalnız API açarında read/write icazəsi olan mühitlər tərcümə üçün yeni mətnlər yarada biləcəklər. Belə bir API açarı ilə istehsal tətbiqinizi sınaya biləcəyiniz, yeni mətnləri canlıya çıxmazdan əvvəl əlavə edə biləcəyiniz bağlı və təhlükəsiz bir staging mühiti olmasını tövsiyə edirik. Bu, heç kimin gizli API açarınızı oğurlamasının və tərcümə layihənizə əlaqəsiz yeni mətnlər əlavə edərək onu ş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!