Next.js tətbiqlərində beynəlxalqlaşdırma (i18n) üçün ən yaxşı həll yolu
Next.js tətbiqinizi yeni bazarlara açmaq istəyirsiniz? TacoTranslate sizin üçün Next.js layihənizi lokalizasiya etməyi inanılmaz dərəcədə asanlaşdırır və sizə qlobal auditoriyaya çata bilməyinizi təmin edir.
Next.js üçün TacoTranslate-ni niyə seçməlisiniz?
- Problemlərsiz İnteqrasiya: Xüsusilə Next.js tətbiqləri üçün hazırlanmış TacoTranslate mövcud iş axınınıza asanlıqla inteqrasiya olunur.
- Avtomatik Mətn Toplama: Artıq JSON fayllarını əl ilə idarə etməyə ehtiyac yoxdur. TacoTranslate kod bazanızdan mətnləri avtomatik toplayır.
- AI ilə Gücləndirilmiş Tərcümələr: Tətbiqinizin tonu ilə uyğun kontekstual dəqiq tərcümələr təmin etmək üçün süni intellektin gücündən istifadə edin.
- Dərhal Dil Dəstəyi: Yeni dillər üçün yalnız bir kliklə dəstək əlavə edin və tətbiqinizi qlobal səviyyədə əlçatan edin.
Necə işləyir
Dünya daha qloballaşdıqca, veb inkişaf etdiricilər üçün müxtəlif ölkə və mədəniyyətlərdən olan istifadəçilərə uyğun gələn tətbiqlər yaratmaq getdikcə daha vacib olur. Bunu əldə etməyin əsas yollarından biri beynəlxalqlaşdırmadır (i18n), bu da tətbiqinizi fərqli 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əfi renderləmə ilə beynəlxalqlaşdırmanı necə əlavə edəcəyimizi araşdıracağıq. TL;DR: Tam nümunəni burada görə bilərsiniz.
Bu bələdçi yalnız Pages Router istifadə edən Next.js tətbiqləri üçündür.
Əgər App Router istifadə edirsinizsə, zəhmət olmasa 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. Bir neçə məşhur kitabxana mövcuddur, o cümlədən next-intl. Lakin, bu nümunədə biz TacoTranslate istifadə edəcəyik.
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 ilə quraşdıraq:
npm install tacotranslate
2-ci Addım: Pulsuz TacoTranslate hesabı yaradın
İndi ki, modul quraşdırılıb, TacoTranslate hesabınızı, tərcümə layihənizi və əlaqəli API açarlarını yaratmağın vaxtıdır. Hesab yaradın. Pulsuzdur və kredit kartı əlavə etməyi tələb etmir.
TacoTranslate tətbiqinin istifadəçi interfeysi daxilində bir layihə yaradın və API açarları sekmesine keçin. Bir read
açarı və bir read/write
açarı yaradın. Biz onları mühit dəyişənləri kimi saxlayacağıq. read
açarına biz public
deyirik, 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
Gizli read/write
API açarını heç vaxt müştəri tərəfi istehsal mühitlərinə 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
: Əsas ehtiyat dil kodu. Bu nümunədə onuen
- İngilis dili olaraq təyin edəcəyik.TACOTRANSLATE_ORIGIN
: Sətirlərinizin saxlanacağı “qovluq”, məsələn, veb saytınızın URL ünvanı. Burada originlər haqqında daha çox oxuyun.
TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com
3-cü addım: TacoTranslate qurulması
TacoTranslate-i tətbiqinizə inteqrasiya etmək üçün əvvəlki 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.
Müştərini ayrı faylda yaratmaq onu sonradan yenidən istifadə etməyi asanlaşdırır. İndi isə, xüsusi /pages/_app.tsx
istifadə edərək, TacoTranslate
təminatçısını ə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 sizin artıq xüsusi pageProps
və _app.tsx
fayllarınız varsa, zəhmət olmasa yuxarıdakı xüsusiyyətlər və kodlarla tərifini genişləndirin.
4-cü addım: Server tərəfi renderinin tətbiqi
TacoTranslate tərcümələrinizin server tərəfi təqdimatını təmin edir. Bu, tərcümə olunmamış məzmunun ilk öncə qısa görünməsi əvəzinə, dərhal tərcümə olunmuş məzmunu göstərməklə istifadəçi təcrübəsini əhəmiyyətli dərəcədə yaxşılaşdırır. Bundan əlavə, müştəri tərəfdə şəbəkə sorğularını ötürə bilərik, çünki artıq ehtiyacımız olan bütün tərcümələrə sahibik.
Biz /next.config.js
faylını yaratmaqla və ya dəyişdirməklə başlayacağıq.
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'),
});
};
isProduction
yoxlamasını öz quraşdırmanıza 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
), 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.
İndiyədək Next.js tətbiqini yalnız dəstəklənən dillərin siyahısı ilə qurdumuz. İndi növbəti addım olaraq bütün səhifələriniz üçün tərcümələri əldə edəcəyik. Bunu etmək üçün tələblərinizə əsaslanaraq getTacoTranslateStaticProps
və ya getTacoTranslateServerSideProps
istifadə edəcəksiniz.
Bu funksiyalar üç arqument qəbul edir: Bir Next.js Static Props Context obyekti, TacoTranslate üçün konfiqurasiya və optional Next.js xüsusiyyətləri. Qeyd edin ki, getTacoTranslateStaticProps
funksiyasında revalidate
standart olaraq 60-a təyin edilib, beləliklə tərcümələriniz daim güncəldə qalır.
Hər iki funksiyanı bir səhifədə istifadə etmək üçün, fərz edək ki, sizin /pages/hello-world.tsx
adlı səhifə faylınız var.
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 istifadə edərək bütün React komponentlərinizdəki sətirləri tərcümə edə bilməlisiniz.
import {Translate} from 'tacotranslate/react';
function Component() {
return <Translate string="Hello, world!"/>
}
5-ci addım: Yerləşdirin və test edin!
Biz işimizi tamamladıq! İndi Next.js tətbiqinizə hər hansı bir sətir əlavə etdiyiniz zaman Translate
komponentində avtomatik olaraq tərcümə olunacaq. Qeyd edin ki, yalnız read/write
icazələri olan mühitlər API açarı ilə yeni tərcümə ediləcək sətirlər yaratmaq imkanı əldə edə biləcək. Biz tövsiyə edirik ki, belə bir API açarı ilə istehsal tətbiqinizi test etmək üçün bağlı və təhlükəsiz bir staging mühiti olsun, canlıya çıxmazdan əvvəl orada yeni sətirlər əlavə edin. Bu, heç kimin sizin gizli API açarınızı oğurlamasının qarşısını alacaq və mümkün olan yeni, əlaqəsiz sətirlər əlavə edərək 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!