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

Necə işləyir

Dünya daha 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 gələ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əfi renderləmə ilə beynəlxalqlaşdırmanı necə əlavə edəcəyimizi araşdıracağıq. TL;DR: Tam nümunəni burada görə bilərsiniz.

Bu bələdçi yalnız Pages Router istifadə edən Next.js tətbiqləri üçündür.
Əgər App Router istifadə edirsinizsə, zəhmət olmasa 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. Bir neçə məşhur kitabxana mövcuddur, 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 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 ki, modul quraşdırılıb, TacoTranslate hesabınızı, tərcümə layihənizi və əlaqəli API açarlarını yaratmağın vaxtıdır. Hesab yaradın. Pulsuzdur və kredit kartı əlavə etməyi tələb etmir.

TacoTranslate tətbiqinin istifadəçi interfeysi daxilində bir layihə yaradın və 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 biz public deyirik, read/write açarı isə secret adlanır. Məsələn, onları layihənizin kökündə 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ı heç vaxt müştəri tərəfi istehsal mühitlərinə sızdırmadığınızdan əmin olun.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Əsas ehtiyat dil kodu. Bu nümunədə onu en - İngilis dili olaraq təyin edəcəyik.
• TACOTRANSLATE_ORIGIN: Sətirlərinizin saxlanacağı “qovluq”, məsələn, veb saytınızın URL ünvanı. Burada originlə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ə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 tezliklə avtomatik olaraq TACOTRANSLATE_API_KEY təyin edəcəyik.

Müştərini ayrı 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 təminatçısını ə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 sizin artıq xüsusi pageProps və _app.tsx fayllarınız varsa, zəhmət olmasa yuxarıdakı xüsusiyyətlər və kodlarla tərifini genişləndirin.

4-cü addım: Server tərəfi renderinin tətbiqi

TacoTranslate tərcümələrinizin server tərəfi təqdimatını təmin edir. Bu, tərcümə olunmamış məzmunun ilk öncə qısa görünməsi əvəzinə, dərhal tərcümə olunmuş məzmunu göstərməklə istifadəçi təcrübəsini əhəmiyyətli dərəcədə yaxşılaşdırır. Bundan əlavə, müştəri tərəfdə şəbəkə sorğularını ötürə bilərik, çünki artıq ehtiyacımız olan bütün tərcümələrə sahibik.

Biz /next.config.js faylını yaratmaqla və ya dəyişdirməklə 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ədək Next.js tətbiqini yalnız dəstəklənən dillərin siyahısı ilə qurdumuz. İndi 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ə əsaslanaraq getTacoTranslateStaticProps və ya getTacoTranslateServerSideProps istifadə edəcəksiniz.

Bu funksiyalar üç arqument qəbul edir: Bir Next.js Static Props Context obyekti, TacoTranslate üçün konfiqurasiya və optional Next.js xüsusiyyətləri. Qeyd edin ki, getTacoTranslateStaticProps funksiyasında revalidate standart olaraq 60-a təyin edilib, beləliklə tərcümələriniz daim güncəldə qalır.

Hər iki funksiyanı bir səhifədə istifadə etmək üçün, fərz edək ki, sizin /pages/hello-world.tsx adlı 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 Translate komponentindən istifadə edərək bütün React komponentlərinizdəki sətirləri tərcümə edə bilməlisiniz.

import {Translate} from 'tacotranslate/react';

function Component() {
	return <Translate string="Hello, world!"/>
}

5-ci addım: Yerləşdirin və test edin!

Biz işimizi tamamladıq! İndi Next.js tətbiqinizə hər hansı bir sətir əlavə etdiyiniz zaman Translate komponentində avtomatik olaraq tərcümə olunacaq. Qeyd edin ki, yalnız read/write icazələri olan mühitlər API açarı ilə yeni tərcümə ediləcək sətirlər yaratmaq imkanı əldə edə biləcək. Biz tövsiyə edirik ki, belə bir API açarı ilə istehsal tətbiqinizi test etmək üçün bağlı və təhlükəsiz bir staging mühiti olsun, canlıya çıxmazdan əvvəl orada yeni sətirlər əlavə edin. Bu, heç kimin sizin gizli API açarınızı oğurlamasının qarşısını alacaq və mümkün olan yeni, əlaqəsiz sətirlər əlavə edərək tərcümə layihənizin ş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!