Next.js tətbiqində App Router-dən istifadə edən beynəlxalqlaşdırmanı necə həyata keçirmək olar

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ə xidmət göstərə biləcək tətbiqlər yaratmaq getdikcə daha vacib olur. Bunu həyata keçirməyin əsas yollarından biri beynəlxalqlaşdırma (i18n) vasitəsilədir, hansı ki, tətbiqinizi müxtəlif dillərə, valyutalara və tarix formatlarına uyğunlaşdırmağa imkan verir.

Bu məqalədə, React Next.js tətbiqinizə server tərəfi renderləşdirmə ilə beynəlxalqlaşdırmanı necə əlavə edəcəyinizi araşdıracağıq. TL;DR: Bütün nümunəni burada baxın.

Bu bələdçi App Router istifadə edən Next.js tətbiqləri üçündür.
Əgər Pages Router istifadə edirsinizsə, bunun əvəzinə bu bələdçiyə baxın.

1-ci Addım: i18n kitabxanasını qurun

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. Ancaq bu nümunədə TacoTranslate istifadə edəcəyik.

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

Gəlin onu terminalınızda npm ilə quraşdırıq:

npm install tacotranslate

2-ci addım: Pulsuz TacoTranslate hesabı yaradın

İndi modul quraşdırıldıqdan sonra, TacoTranslate hesabınızı, tərcümə layihənizi və əlaqəli API açarlarını yaratmağın vaxtı gəldi. Hesab yaradın burada. Bu pulsuzdur və kredit kartı əlavə etməyinizi tələb etmir.

TacoTranslate tətbiqi İstifadəçi İnterfeysində bir layihə yaradın və onun API keys sekmesine keçin. Bir read açarı və bir read/write açarı yaradın. Onları mühit dəyişənləri kimi yadda saxlayacağıq. read açarını public kimi adlandırırıq və read/write açarı isə secret adlanı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

Müştəri tərəfi istehsal mühitlərinə gizli read/write API açarını heç vaxt 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: Defolt ehtiyat 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, saytınızın URL-i. Burada originlər barədə daha çox oxuyun.

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

3-cü addım: TacoTranslate qurulması

To integrate TacoTranslate with your application, you’ll need to create a client using the API keys from earlier. For example, create a file named /tacotranslate-client.js.

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_IS_PRODUCTION === 'true'
			? process.env.TACOTRANSLATE_PROJECT_LOCALE
			: undefined,
});

module.exports = tacoTranslate;

Biz qısa müddətdə avtomatik olaraq TACOTRANSLATE_API_KEY və TACOTRANSLATE_PROJECT_LOCALE təyin edəcəyik.

Ayrı bir faylda clientin yaradılması, sonradan yenidən istifadə etməyi asanlaşdırır. getLocales sadəcə bəzi inşa edilmiş xəta işlənməsi ilə bir yardımçı funksiyadır. /app/[locale]/tacotranslate.tsxadında bir azərbaycan faylı yaradın , burada TacoTranslate provayderi tətbiq edəcəyik.

'use client';

import React, {type ReactNode} from 'react';
import {
	type TranslationContextProperties,
	TacoTranslate as ImportedTacoTranslate,
} from 'tacotranslate/react';
import tacoTranslateClient from '@/tacotranslate-client';

export default function TacoTranslate({
	locale,
	origin,
	localizations,
	children,
}: TranslationContextProperties & {
	readonly children: ReactNode;
}) {
	return (
		<ImportedTacoTranslate
			client={tacoTranslateClient}
			locale={locale}
			origin={origin}
			localizations={localizations}
		>
			{children}
		</ImportedTacoTranslate>
	);
}

Qeyd edin ki, 'use client'; bu komponentin istemci komponenti olduğunu göstərir.

Kontekst provayderi indi getməyə hazır olduğu üçün, /app/[locale]/layout.tsxadlı fayl yaradın , bizim tətbiqimizdə root layout. Qeyd edək ki, bu cığırda [locale] dinamik parametr olduğu Dynamic Routesistifadə edən qovluq var.

import React, {type ReactNode} from 'react';
import {type Locale, isRightToLeftLocaleCode} from 'tacotranslate';
import './global.css';
import tacoTranslateClient from '@/tacotranslate-client';
import TacoTranslate from './tacotranslate';

export async function generateStaticParams() {
	const locales = await tacoTranslateClient.getLocales();
	return locales.map((locale) => ({locale}));
}

type RootLayoutParameters = {
	readonly params: Promise<{locale: Locale}>;
	readonly children: ReactNode;
};

export default async function RootLayout({params, children}: RootLayoutParameters) {
	const {locale} = await params;
	const origin = process.env.TACOTRANSLATE_ORIGIN;
	const localizations = await tacoTranslateClient.getLocalizations({
		locale,
		origins: [origin /* , other origins to fetch */],
	});

	return (
		<html lang={locale} dir={isRightToLeftLocaleCode(locale) ? 'rtl' : 'ltr'}>
			<body>
				<TacoTranslate
					locale={locale}
					origin={origin}
					localizations={localizations}
				>
					{children}
				</TacoTranslate>
			</body>
		</html>
	);
}

Burada ilk diqqət yetirilməli məqam odur ki, biz həmin dil üçün tərcümələri əldə etmək üçün Dynamic Route parametrlərimiz [locale] istifadə edirik. Əlavə olaraq, generateStaticParams layihəniz üçün aktivləşdirdiyiniz bütün locale kodlarının əvvəlcədən render olunmasını təmin edir.

İndi isə ilk səhifəmizi yaradaq! /app/[locale]/page.tsx adlı bir fayl yaradın.

import React from 'react';
import {Translate} from 'tacotranslate/react';

export const revalidate = 60;
export default async function Page() {
	return (
		<Translate string="Hello, world!" />
	);
}

Qeyd edin ki, revalidate dəyişəni Next.js-ə səhifəni 60 saniyə sonra yenidən qurmağı və tərcümələrinizi güncəldə saxlamağı bildirir.

Addım 4: Server tərəfi rendering-in həyata keçirilməsi

TacoTranslate server tərəfində renderi dəstəkləyir. Bu, istifadəçi təcrübəsini xeyli yaxşılaşdırır, çünki tərcümə olunmuş məzmun dərhal göstərilir, əvvəlcə tərcümə olunmamış məzmunun qısa yanıb-sönməsi yerinə. Bundan əlavə, müştəri tərəfində şəbəkə sorğularını keçə bilərik, çünki istifadəçinin baxdığı səhifə üçün lazım olan tərcümələr artıq mövcuddur.

Server tərəf renderinqi qurmaq üçün /next.config.js faylını yaradın və ya dəyişdirin:

const withTacoTranslate = require('tacotranslate/next/config').default;
const tacoTranslateClient = require('./tacotranslate-client');

module.exports = async () => {
	const config = await withTacoTranslate(
		{},
		{
			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'),
		}
	);

	// NOTE: Remove i18n from config when using the app router
	return {...config, i18n: undefined};
};

isProduction yoxlamasını öz quruluşunuza 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), tərcümə üçün yeni sətirlərin göndərilməsini təmin etmək üçün gizli read/write API açarından istifadə edəcəyik.

Routing və yönləndirmənin gözlənildiyi kimi işləməsini təmin etmək üçün, /middleware.ts adlı bir fayl yaratmalıyıq. Middleware istifadə edərək, istifadəçiləri üstünlük verdikləri dildə təqdim olunan səhifələrə yönləndirə bilərik.

import {type NextRequest} from 'next/server';
import {middleware as tacoTranslateMiddleware} from 'tacotranslate/next';
import tacoTranslate from '@/tacotranslate-client';

export const config = {
	matcher: ['/((?!api|_next|favicon.ico).*)'],
};

export async function middleware(request: NextRequest) {
	return tacoTranslateMiddleware(tacoTranslate, request);
}

Əmin olun ki, matcher Next.js Middleware sənədlərinə uyğun olaraq qurulub.

Müştəri tərəfdə, istifadəçinin üstünlük verdiyi dili dəyişdirmək üçün locale kukisini dəyişə bilərsiniz. Bunu necə etmək barədə fikirlər üçün tam nümunə koduna baxın!

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

Bitirdik! İndi React tətbiqinizdə istənilən sətiri Translate komponentinə əlavə etdiyiniz zaman avtomatik tərcümə olunacaq. Qeyd edin ki, yalnız read/write icazələrinə malik API açarına sahib mühitlər tərcümə üçün yeni sətirləri yarada biləcəklər. Biz tövsiyə edirik ki, bağlı və təhlükəsiz bir staging mühitiniz olsun ki, orada belə bir API açarı ilə istehsal tətbiqinizi sınaya biləsiniz və yayıma başlamazdan əvvəl yeni sətirlər əlavə edəsiniz. Bu, gizli API açarınızın oğurlanmasının qarşısını alacaq və tərcümə layihənizin əlavə, əlaqəsiz sətirlərlə şişməsinin qarşısını alacaq.

Əmin olun ki, GitHub profilimizdə tam nümunəyə baxasınız. Orada, həmçinin Pages Router istifadə edərək bunu necə edəcəyiniz barədə bir nümunə tapa bilərsiniz! Hər hansı bir problem yaşasanız, bizimlə əlaqə saxlayın, və biz kömək etməkdən məmnun olarıq.

TacoTranslate React tətbiqlərinizi avtomatik olaraq hər hansı bir dildən və ya dilə sürətlə lokalizasiya etməyə imkan verir. Bugündən başlayın!