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ə xidmət göstərə bilən tətbiqlər hazırlamaq getdikcə daha vacib olur. Buna 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ən renderləşdirmə (SSR) ilə beynəlxalqlaşdırma (i18n) əlavə etməyi öyrənəcəyik. TL;DR: Tam nümunəni burada 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ə, onun əvəzinə bu bələdçiyə baxın.

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

TacoTranslate qabaqcıl süni intellektdən istifadə edərək mətnlərinizi hər hansı dilə avtomatik tərcümə edir və sizi JSON fayllarının yorucu idarə edilməsindən azad edir.

Gəlin terminalınızda npm vasitəsilə 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ə müvafiq API açarlarını yaratmağın vaxtıdır. Buradan hesab yaradın. Ödənişsizdir 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ı nişanına 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, read/write açarı isə secretdir. Məsələn, onları layihənizin kökündəki .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ı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: Varsayılan əvəzedici (fallback) lokal kodu. Bu nümunədə onu İngilis dili üçün en olaraq təyin edəcəyik.
• TACOTRANSLATE_ORIGIN: Mətnlərinizin saxlanacağı “qovluq”, məsələn saytınızın URL-i. Originlər haqqında buradan daha çox 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 daha əvvəl əldə etdiyiniz 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.

Clienti ayrı faylda yaratmaq onu sonradan 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 xüsusi pageProps və _app.tsx varsa, zəhmət olmasa yuxarıdakı xüsusiyyətlər və kodu əlavə edərək tərifi genişləndirin.

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

TacoTranslate tərcümələrinizin server tərəfdə render olunmasına imkan verir. Bu, istifadəçi təcrübəsini xeyli yaxşılaşdırır — tərcümə edilmiş məzmunu dərhal göstərərək əvvəlcə tərcümə olunmamış məzmunun qısa müddətli görünməsinin qarşısını alır. Əlavə olaraq, artıq ehtiyac duyduğumuz bütün tərcümələrə malik olduğumuz üçün müştəri tərəfində şəbəkə sorğularını atlamaq mümkündür.

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

Quraşdırmanıza uyğunlaşdırmaq üçü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əsinizsə (isProduction is false), yeni sətirlərin tərcümə üçün göndərildiyini təmin etmək üçün gizli read/write API açarından istifadə edəcəyik.

İndiyədək Next.js tətbiqində yalnız dəstəklənən dillərin siyahısını təyin etmişik. Növbəti edəcəyimiz iş bütün səhifələriniz üçün tərcümələri əldə etməkdir. Bunun üçün tələblərinizə əsasən getTacoTranslateStaticProps və ya getTacoTranslateServerSideProps istifadə edəcəksiniz.

Bu funksiyalar üç arqument qəbul edir: biri Next.js Static Props Context obyekti, digəri TacoTranslate konfiqurasiyası və üçüncüsü istəyə bağlı Next.js xüsusiyyətləridir. Qeyd edin ki, getTacoTranslateStaticProps funksiyasında revalidate standart olaraq 60-a təyin olunub, beləliklə tərcümələriniz aktual qalır.

Hər iki funksiyadan birini səhifədə istifadə etmək üçün tutaq ki, belə bir səhifə faylınız var: /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!"/>
}

5-ci addım: Yerləşdirin və sınaqdan keçirin!

Bitirdik! Next.js tətbiqiniz indi Translate komponentinə hər hansı sətri əlavə etdiyiniz zaman avtomatik olaraq tərcümə olunacaq. Qeyd edək ki, yalnız API açarında read/write icazəsi olan mühitlər tərcümə olunmaq üçün yeni sətirlər yarada biləcəklər. İstehsal tətbiqinizi belə bir API açarı ilə sınaya biləcəyiniz, canlı yayıma başlamazdan əvvəl yeni sətirləri əlavə edə biləcəyiniz bağlı və təhlükəsiz bir staging mühiti olmasını tövsiyə edirik. Bu, gizli API açarınızın oğurlanmasının və yeni, əlaqəsiz sətirlər əlavə etməklə 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!