Լավագույն լուծումը Next.js հավելվածների համար միջազգայինացում (i18n) ապահովելու համար
Ցանկանու՞մ եք Ձեր Next.js հավելվածը ընդլայնել նոր շուկաներում։ TacoTranslate-ը աներևակայելի հեշտ է դարձնում Ձեր Next.js նախագծի տեղայնացումը՝ հնարավորություն ընձեռելով Ձեզ հասնել համաշխարհային լսարանի առանց բարդությունների։
Ինչու ընտրել TacoTranslate կոդային Next.js-ի համար:
- Միջհարկային ինտեգրում՝ Դասավորված հատուկ Next.js ծրագրերի համար, TacoTranslate հեշտությամբ ինտեգրվում է ձեր ներկայիս աշխատանքային հոսքին։
- Ավտոմատ տեքստերի հավաքում՝ Այժմ այլեւս անհրաժեշտ չէ ձեռքով կառավարել JSON ֆայլերը։ TacoTranslate ավտոմատ կերպով հավաքում է տեքստերը ձեր կոդի հիմքից։
- ԱՊ (Արհեստական բանականության) միջոցով թարգմանություններ՝ Օգտագործեք ԱՊ ուժը՝ տրամադրելու կոնտեքստին համապատասխան ճշգրիտ թարգմանություններ, որոնք ընտելանում են ձեր ծրագրի տոնին։
- Աննախադեպ լեզվային աջակցություն՝ Ավելացրեք նոր լեզուների աջակցություն մեկ սեղմումով, դարձնելով ձեր ծրագիրը հասանելի գլոբալ մակարդակով։
Ինչպես է այն աշխատում
Աշխարհը ավելի գլոբալանալու հետ միասին, հաճախորդների տարբեր երկրներից և մշակույթներից ծրագրեր կառուցելը դառնում է առավել կարևոր վեբ ծրագրավորողների համար: Այդ նպատակին հասնելու հիմնական ուղիներից մեկը միջազգայինացում (i18n) է, որը թույլ է տալիս ձեր հավելվածը հարմարվել տարբեր լեզուների, արժույթների և ամսաթվերի ձևաչափերի:
Այս ձեռնարկում մենք կքննարկենք, թե ինչպես ավելացնել միջազգայինացում ձեր React Next.js հավելվածում՝ սերվերային կողմի ցուցադրման հետ միասին: TL;DR: Ամբողջական օրինակ դիտելու համար կտտացրեք այստեղ։
Այս ուղեցույցը նախատեսված է Next.js հավելվածների համար, որոնք օգտագործում են Pages Router:
Եթե դուք օգտագործում եք App Router, խնդրում ենք օգտագործել այս ուղեցույցը։
Քայլ 1: Տեղադրեք i18n գրադարան
Ձեր Next.js հավելվածում միջազգայինացման (i18n) իրականացման համար նախ կընտրենք i18n գրադարան: Կան մի քանի հանրահայտ գրադարաններ, այդ թվում նաև next-intl: Սակայն այս օրինակ에서는 մենք օգտագործելու ենք TacoTranslate:
TacoTranslate-ն ավտոմատ կերպով թարգմանում է ձեր տողերը ցանկացած լեզվով՝ օգտագործելով նորարարական բարդ AI տեխնոլոգիաները, և ազատում է ձեզ JSON ֆայլերի հոգնեցուցիչ կառավարման բեռից:
Եկեք տեղադրենք այն օգտագործելով npm ձեր տերմինալում:
npm install tacotranslate
Քայլ 2: Ստեղծեք անվճար TacoTranslate հաշիվ
Հիմա, երբ դուք տեղադրել եք մոդուլը, ժամանակն է ստեղծելու ձեր TacoTranslate հաշիվը, թարգմանության նախագիծը և կապված API բանալիները։ Ահա այստեղ ստեղծեք հաշիվ։ Դա անվճար է, և պահանջում չէ՝ ավելացնել կրեդիտ քարտ։
TacoTranslate հավելվածի UI-ում ստեղծեք նախագիծ և անցեք նրա API բանալիների ներդիրին։ Ստեղծեք մեկը read
բանալին և մեկը read/write
բանալին։ Դրանք կպահենք որպես միջավայրի փոփոխականներ։ read
բանալին մենք կոչում ենք public
և read/write
բանալին կոչվում է secret
: Օրինակ՝ կարող եք դրանք ավելացնել ձեր նախագծի արմատային թղթապանակում գտնվող .env
ֆայլում։
TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010
Համոզվեք, որ երբեք չբացահայտեք գաղտնի read/write
API բանալին հաճախորդի կողմից աշխատող արտադրական միջավայրերին:
Մենք կմիացնենք նաև երկու միջավայրային փոփոխականներ՝ TACOTRANSLATE_DEFAULT_LOCALE
և TACOTRANSLATE_ORIGIN
:
TACOTRANSLATE_DEFAULT_LOCALE
`: Ամենագլխավոր զուգընթաց տեղանքի կոդը։ Այս օրինակագայում մենք կդնենք այն որպեսen
` անգլերենի համար։TACOTRANSLATE_ORIGIN
`: «Թղթապանակը», որտեղ պահվելու են ձեր տողերը, օրինակ ձեր կայքի URL-ը։ Կարդացեք ավելին սկզբնաղբյուրների մասին այստեղ։
TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com
Քայլ 3՝ TacoTranslate-ի կարգավորում
Դուք պետք է ստեղծեք հաճախորդ, օգտագործելով նախորդ API բանալիները, որպեսզի ինտեգրեք TacoTranslate-ը ձեր կիրառության հետ: Օրինակ՝ ստեղծեք ֆայլ՝ /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_DEFAULT_LOCALE ?? '',
});
module.exports = tacoTranslate;
Մենք շուտով ավտոմատ կերպով կներմուծենք TACOTRANSLATE_API_KEY
-ը:
Հաճախորդը ստեղծելը առանձին ֆայլում ավելի հեշտ է դարձնում այն հետո կրկին օգտագործելը։ Այժմ, օգտագործելով հարմարեցված /pages/_app.tsx
, մենք կավելացնենք TacoTranslate
պրովայդերը։
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>
);
}
Եթե արդեն ունեք հարմարեցված pageProps
և _app.tsx
, ապա խնդրում ենք ընդլայնել սահմանումը վերևում նշված հատկություններով և կոդով։
Քայլ 4. Մշակել սերվերային կողմի արտապատկերումը
TacoTranslate-ն թույլ է տալիս սերվերային կողմից մատուցել ձեր թարգմանությունները։ Սա զգալիորեն բարելավում է օգտատիրոջ փորձը՝ անմիջապես ցույց տալով թարգմանված բովանդակությունը՝ փոխարենը սկզբում ցույց տալ անթարգմանված բովանդակության արագ անցում։ Բացի այդ, մենք կարող ենք բաց թողնել ցանցային հարցումները հաճախորդի կողմից, քանի որ արդեն ունենք բոլոր անհրաժեշտ թարգմանությունները։
Մենք կսկսենք /next.config.js
ֆայլը ստեղծելով կամ փոփոխելով։
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
ստուգումը՝ ձեր կարգավորումների համապատասխան։ Եթե true
է, TacoTranslate-ը ցույց կտա հանրային API բանալին։ Եթե մենք գտնվում ենք տեղական, փորձարկող կամ նախավերջնական միջավայրում (isProduction
is false
), մենք օգտագործելու ենք գաղտնի read/write
API բանալին՝ ապահովելու համար, որ նոր տողերը ուղարկվեն թարգմանության։
Առայժմ մենք միայն սահմանարկել ենք Next.js հավելվածը՝ աջակցվող լեզուների ցուցակով: Հաջորդ քայլը կլինի ձեր բոլոր էջերի թարգմանությունները ստանալը: Դրա համար դուք կօգտագործեք կամ getTacoTranslateStaticProps
կամ getTacoTranslateServerSideProps
՝ ձեր պահանջների հիման վրա։
Այս ֆունկցիաները պահանջում են երեք պարամետրեր՝ մեկ Next.js Static Props Context օբյեկտ, TacoTranslate-ի կոնֆիգուրացիա և ցանկալի Next.js հատկություններ։ Նշեք, որ revalidate
անգամը getTacoTranslateStaticProps
ֆունկցիայում սկզբնական արժեքով սահմանված է 60, որպեսզի ձեր թարգմանությունները թարմացված լինեն։
Հարկավորության դեպքում որևէ ֆունկցիա օգտագործելու համար էջում, ընդունենք, որ ունեք էջի ֆայլ, օրինակ՝ /pages/hello-world.tsx
:
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!"/>;
}
Հիմա դուք պետք է կարողանաք օգտագործել Translate
կոմպոնենտը՝ ձեր բոլոր React կոմպոնենտներում տողերը թարգմանելու համար։
import {Translate} from 'tacotranslate/react';
function Component() {
return <Translate string="Hello, world!"/>
}
Քայլ 5: Տեղադրե՛ք և փորձարկե՛ք!
Մենք ավարտել ենք։ Ձեր Next.js հավելվածը այժմ ավտոմատ կերպով կթարգմանվի, երբ ավելացնեք ցանկացած տեքստ Translate
կոմպոնենտի մեջ։ Կատևորն այն է, որ նոր տեքստեր թարգմանության համար կարող են ստեղծվել միայն այն միջավայրերում, որտեղ API բանալիի վրա կան read/write
իրավունքներ։ Հաստատում ենք, որ ունենաք փակ և ապահովված ստեյջինգ միջավայր, որտեղ կարող եք փորձարկել ձեր արտադրական հավելվածը API բանալիով, նոր տեքստեր ավելացնելուց առաջ։ Սա կխուսափեցնի ձեր գաղտնի API բանալիի գողանալուն, և հնարավոր է կանխարգելի թարգմանության ձեր նախագծի ավելորդ և չկապակցված տեքստերով բեռնվելը։
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!