App Router istifadə edən Next.js tətbiqində beynəlxalqlaşdırmanı necə tətbiq etmək olar App Router

Dünya daha qloballaşdıqca, veb inkişaf etdiricilərin müxtəlif ölkə və mədəniyyətlərdən olan istifadəçilərə uyğunlaşa bilən tətbiqlər yaratması getdikcə vacib olur. Bunun əldə edilməsinin əsas yollarından biri beynəlxalqlaşdırmadır (i18n), bu da 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əfli renderləşmə ilə necə beynəlxalqlaşdırma əlavə etmək lazım olduğunu araşdıracağıq. TL;DR: Tam nümunəni burada görün.

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

1-ci addım: 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çə məşhur kitabxana var, o cümlədən next-intl. Lakin bu nümunədə biz TacoTranslate.

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 istifadə edərək quraşdıraq:

npm install tacotranslate

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

Modulu quraşdırdığınız üçün indi TacoTranslate hesabı, tərcümə layihəsi və əlaqəli API açarlarını yaratmağın vaxtıdır. Hesab yaradın. Bu pulsuzdur və kredit kartı əlavə etmənizi tələb etmir.

TacoTranslate tətbiqinin istifadəçi interfeysində bir layihə yaradın və API açarları bölməsinə keçin. Bir read açarı və bir read/write açarı yaradın. Onları ətraf 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ğ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əfinin istehsal mühitlərinə heç vaxt sızdırmadığınızdan əmin olun.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Varsayılan əvəzedici 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. Originlər haqqında daha çox məlumatı burada oxuyun.

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

3-cü Addım: TacoTranslate-in qurulması

TacoTranslate-i tətbiqinizə inteqrasiya etmək üçün əvvəlki API açarlarından istifadə edərək bir müştəri 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_IS_PRODUCTION === 'true'
			? process.env.TACOTRANSLATE_PROJECT_LOCALE
			: undefined,
});

module.exports = tacoTranslate;

Qısa müddətdə TACOTRANSLATE_API_KEY və TACOTRANSLATE_PROJECT_LOCALE avtomatik olaraq təyin ediləcək.

Clienti ayrı bir faylda yaratmaq onu sonradan yenidən istifadə etməyi asanlaşdırır. getLocales sadəcə bəzi daxili səhv işləmə mexanizmləri olan yardımçı funksiyadır. İndi /app/[locale]/tacotranslate.tsx adlı bir fayl yaradın; burada TacoTranslate təminatçısını həyata keçirə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>
	);
}

Bu bir client komponenti olduğunu göstərən 'use client'; ifadəsinə diqqət yetirin.

Kontekst provayderi artıq istifadəyə hazır olduqdan sonra, tətbiqimizdə kök layout olan /app/[locale]/layout.tsx adlı bir fayl yaradın. Qeyd edin ki, bu yol Dynamic Routes istifadə edən bir qovluğa malikdir, burada [locale] dinamik parametrdir.

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 nəzərə alınmalı ilk məqam odur ki, biz həmin dil üçün tərcümələri çəkmək üçün Dynamic Route parametri [locale] istifadə edirik. Əlavə olaraq, generateStaticParams layihəniz üçün aktivləşdirdiyiniz bütün lokal kodlarının əvvəlcədən render olunduğundan əmin olur.

İndi gəlin 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!" />
	);
}

Next.js-ə səhifəni 60 saniyədən sonra yenidən qurmağı və tərcümələrinizi güncəl saxlamağı bildirən revalidate dəyişəninə diqqət yetirin.

Addım 4: Server tərəfli renderləməni həyata keçirmək

TacoTranslate server-tərəfli renderləməni dəstəkləyir. Bu, istifadəçi təcrübəsini xeyli yaxşılaşdırır: tərcümə olunmuş məzmunu dərhal göstərir, yəni əvvəlcə tərcümə olunmamış məzmunun qısa müddətli görünməsi baş vermir. Əlavə olaraq, müştəri tərəfdə şəbəkə sorğularını atlaya bilərik, çünki istifadəçinin baxdığı səhifə üçün lazım olan tərcümələr artıq mövcuddur.

Server-tərəfli renderləməni qurmaq üçün /next.config.js-i 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};
};

Quraşdırmanı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 yerli, test və ya staging mühitində olsaq (isProduction is false), yeni sətrlə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.

Marşrutlaşdırma və yönləndirmənin gözlənildiyi kimi işləməsini təmin etmək üçün /middleware.ts adlı fayl yaratmalıyıq. Middleware vasitəsilə istifadəçiləri onların ü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);
}

matcher parametrlərini Next.js Middleware sənədlərinə uyğun olaraq qurduğunuzdan əmin olun.

Klientdə istifadəçinin üstünlük verdiyi dili dəyişdirmək üçün locale kukisini dəyişə bilərsiniz. Bunu necə etmək barədə ideyalar üçün tam nümunə koduna baxın!

Addım 5: Yayımlayın və sınaqdan keçirin!

Hazırıq! React tətbiqiniz indi Translate komponentinə hər hansı sətir əlavə etdikdə avtomatik tərcümə olunacaq. Qeyd edin ki, yalnız API açarında read/write icazələrə malik mühitlər tərcümə üçün yeni sətirlər yarada biləcəklər. Belə bir API açarı ilə istehsal tətbiqinizi sınaya biləcəyiniz, yeni sətirləri canlıya keçməzdən əvvəl əlavə edə biləcəyiniz bağlı və təhlükəsiz bir staging mühiti olmasını tövsiyə edirik. Bu, kimsənin gizli API açarınızı oğurlamasının və potensial olaraq yeni, əlaqəsiz sətirlər əlavə etməklə tərcümə layihənizi ş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 Pages 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!