TacoTranslate
/
SənədləşdirməQiymətlər
 
Təlimat
04 may

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

React tətbiqinizi daha əlçatan edin və beynəlxalqlaşdırma (i18n) ilə yeni bazarlara çatın.

Dünya getdikcə daha da qloballaşdıqca, veb inkişaf etdiricilər üçün müxtəlif ölkələrdən və mədəniyyətlərdən olan istifadəçilərə uyğun tətbiqlər yaratmaq getdikcə daha vacib olur. Bunu təmin etməyin əsas yollarından biri internacionalizasiya (i18n) vasitəsilədir, 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əfi renderləmə ilə necə internacionalizasiya əlavə etməyi araşdıracağıq. TL;DR: Tam nümunəyə buradan baxın.

Bu bələdçi App Router istifadə edən Next.js tətbiqləri üçündür.
Əgər siz Pages Router istifadə edirsinizsə, onun 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. Populyar kitabxanalardan bəzilərinə next-intl daxildir. Lakin bu nümunədə biz TacoTranslate istifadə edəcəyik.

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

Terminalınızda npm istifadə edərək quraşdıraq:

npm install tacotranslate

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

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

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

.env
TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Müştəri tərəfində istehsal mühitlərinə heç vaxt gizli read/write API açarını sızdırmadığınızdan əmin olun.

Biz həmçinin iki əlavə mühit dəyişəni əlavə edəcəyik: TACOTRANSLATE_DEFAULT_LOCALETACOTRANSLATE_ORIGIN.

  • TACOTRANSLATE_DEFAULT_LOCALE: Əsas ehtiyat lokal kodu. Bu nümunədə biz onu ingilis dili üçün en olaraq təyin edəcəyik.
  • TACOTRANSLATE_ORIGIN: Sətirlərinizin saxlanacağı “qovluq”, məsələn saytınızın ünvanı. Burada originlər barədə daha ətraflı oxuyun.
.env
TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com

3-cü Addım: TacoTranslate-ın Qurulması

TacoTranslate-i tətbiqinizə inteqrasiya etmək üçün əvvəlki API açarlarından istifadə edərək bir klient yaratmalısınız. Məsələn, /tacotranslate-client.js adlı bir fayl yaradın.

/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 tezliklə avtomatik olaraq TACOTRANSLATE_API_KEYTACOTRANSLATE_PROJECT_LOCALE təyin edəcəyik.

Müştərini ayrıca faylda yaratmaq, onu daha sonra yenidən istifadə etməyi asanlaşdırır. getLocales sadəcə bəzi daxili səhv emalına malik utilit funksiyasıdır. İndi, /app/[locale]/tacotranslate.tsx adlı bir fayl yaradın, burada TacoTranslate provayderini həyata keçirəcəyik.

/app/[locale]/tacotranslate.tsx
'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 müştəri komponenti olduğunu göstərir.

Kontekst təminatçısı 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 qovluqdur və burada [locale] dinamik parametrdir.

/app/[locale]/layout.tsx
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 qeyd edilmə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. Bundan əlavə, generateStaticParams layihənizdə aktivləşdirdiyiniz bütün lokal kodların əvvəlcədən render olunmasını təmin edir.

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

/app/[locale]/page.tsx
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ədən sonra yenidən qurmağı və tərcümələrinizi güncəl saxlamağı bildirir.

4-cü addım: Server tərəfi renderləməyi tətbiq etmək

TacoTranslate server tərəfində renderləməni dəstəkləyir. Bu, istifadəçi təcrübəsini xeyli yaxşılaşdırır, çünki əvvəlcə tərcümə olunmamış məzmunun sürətlə görünməsi əvəzinə dərhal tərcümə olunmuş məzmun göstərilir. Əlavə olaraq, istifadəçinin baxdığı səhifə üçün lazım olan tərcümələr artıq bizdə olduğundan, müştəri tərəfində şəbəkə sorğularını keçə bilərik.

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

/next.config.js
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ğunlaşdırın. Ə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.

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ı 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.

/middleware.ts
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);
}

Zəhmət olmasa matcher quruluşunu Next.js Middleware sənədləri ilə uyğunlaşdırdığınıza əmin olun.

Müştəri tərəfində, istifadəçinin üstünlük verdiyi dili dəyişdirmək üçün locale cookie-ni dəyişə bilərsiniz. Bunun necə ediləcəyinə dair fikirlər üçün tam nümunə koduna baxın!

5-ci addım: Yerləşdirin və sınayın!

Biz işimizi bitirdik! İndi React tətbiqinizə hər hansı mətn əlavə etdiyiniz zaman Translate komponentində avtomatik tərcümə olunacaq. Qeyd edin ki, yalnız read/write icazələrinə malik API açarlarına sahib mühitlər tərcümə üçün yeni mətnlər yarada bilərlər. Tövsiyə edirik ki, bağlı və qorunan bir sınaq mühiti quraraq orada istehsal tətbiqinizi belə bir API açarı ilə sınayasınız və canlıya keçməzdən əvvəl yeni mətnlər əlavə edəsiniz. Bu, gizli API açarınızın oğurlanmasının qarşısını alacaq və istənməyən, əlaqəsiz mətnlər əlavə etməklə tərcümə layihənizi şişirtmənin 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!

Nattskiftet tərəfindən hazırlanmış məhsulNorveçdə hazırlanmışdır