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.
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_LOCALE
və TACOTRANSLATE_ORIGIN
.
TACOTRANSLATE_DEFAULT_LOCALE
: Əsas ehtiyat lokal kodu. Bu nümunədə biz onu ingilis dili üçünen
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.
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.
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_KEY
və TACOTRANSLATE_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.
'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.
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.
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:
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.
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!