በNext.js መተግበሪያዎች ውስጥ ለአለም አቀፍ ማስተካከያ (i18n) ምርጥ መፍትሄ
እርስዎ የNext.js መተግበሪያዎን ወደ አዲስ ገበያዎች ለማስፋፋት ትፈልጋለህ? TacoTranslate የሚያስችለውን በእጅግ ቀላል መልኩ የNext.js ፕሮጀክትህን ለአለም አቀፍ ተደራሽ ለማድረግ እንዲያስችልህ ነው፣ ያለ ችግር ዓለም አቀፍ ተደራሽ ተደርጓል።
ለምን ለNext.js ታኮትራንስሌትን መምረጥ?
- ቀላል ማዋቀር: ለNext.js መተግበሪያዎች በተለየ ሁኔታ የተነደፈ በኩል ወደ አሁን ያለዎት ስራ ፈርጅ ቀላል ማዋቀር ያደርጋል።
- ራስ-ሰር የሚሰበሰብ የሐረግ ስብስብ: ከJSON ፋይሎች በእጅ ማስተዳደር አይደገፍም። TacoTranslate ራስሰር ከኮድ ሕወሓትዎ ሐረጎችን ያሰብሰባል።
- በAI የተጎዳኘ ትርጉሞች: የAI ኃይልን በመጠቀም በተለያዩ ሁኔታዎች የትክክለኛ ትርጉሞችን ለመስጠት እንደሚያበረታታ ይጠቀሙ።
- አንደኛው ቋንቋ ድጋፍ: በአንድ ክሊክ ለአዲስ ቋንቋዎች ድጋፍ ያክሉ፣ መተግበሪያዎን በዓለም አቀፍ ሁኔታ ያደርስ።
እንዴት እንደሚሰራ
ከዓለም የበለጠ በአለም አቀፍ ሁኔታ ሲሆን፣ ለድር ስራ አሰራሮች ከተለያዩ ሀገራትና ባህላዊ ተጠቃሚዎች ለማገልገል እንዲችሉ መተግበርያዎች መገንባት እጅግ አስፈላጊ ነው። ይህን ለማስቻል የተፈለገው አንዱ አሰራር በዓለም አቀፍ አስተዋፅኦ (i18n) ነው፣ ይህም መተግበርያዎን ወደ ተለያዩ ቋንቋዎች፣ ገንዘቦች እና ቀን ቅርጸ ቀናቶች ማስተካከል እንዲደርስ ይፈቅዳል።
በዚህ መምሪያ ውስጥ ደርድሮ እንዴት ወደ እርስዎ የReact Next.js መተግበርያ አሰራር ዓለም አቀፍ አስተዋፅኦ ማክሰኞ ከአገልጋይ አገልግሎት ጋር እንማራለን። TL;DR: ሙሉውን እንቅስቃሴ እዚህ ይመልከቱ።
ይህ መመሪያ ለNext.js መተግበሪያዎች ነው እነሱም Pages Router እየተጠቀሙ ናቸው።
ከሆነም የተጠቀሱት App Router ከሆነ፣ እባክዎ በተቃራኒው ይመልከቱ ይህን መመሪያ።
እርምጃ 1: አንድ የ i18n ቤተ-መፃህፍት አስተካክል
በNext.js መተግበሪያዎ ውስጥ አለም አቀፍ አስተካክል (internationalization) ለማካሄድ በመጀመሪያ አንድ አይ ፍያን ቤተ-መፅሃፍት (i18n library) እንምረጥ። ብዙ የታወቁ ቤተ-መፅሃፍት አሉ፣ ከእነዚህም next-intl አንዱ ነው። ነገር ግን በዚህ ምሳሌ ውስጥ TacoTranslate እንጠቀም።
TacoTranslate በሚገርም የAI ቴክኖሎጂ በመጠቀም ቃላቶችህን ለማንኛውም ቋንቋ በራሱ ይተርጎማል፥ እና ከJSON ፋይሎች የተነሳ ከሚሰጥ አሳሳቢ አስተዳደር ይዋጋል።
እንግዲኛ በterminal ውስጥ npm በመጠቀም እንጫን።
npm install tacotranslate
ደረጃ 2፡ ነፃ የTacoTranslate አካውንት ይፍጠሩ
አሁን ሞጁሉ ከተጫነው በኋላ፣ የTacoTranslate መለያዎን፣ የትርጉም ፕሮጀክትን እና ተያያዥ የAPI ቁልፎችን ለመፍጠር ጊዜው ነው። እዚህ መለያ ይፍጠሩ። ነፃ ነው፣ እና ክሬዲት ካርድ ማካተት አያስፈልግም።
በTacoTranslate መተግበሪያ UI ውስጥ፣ ፕሮጀክት ፍጠር እና ወደ API ቁልፎቹ ትርጉም ትሄድ። አንድ read
ቁልፍ እና አንድ read/write
ቁልፍ ፍጠር። እነዚህን እንደ አካባቢ ተለዋዋጮች እንደተቀመጥን እናደርጋለን። እንደ ምሳሌ፣ እነዚህን በፕሮጀክትህ ራእይ ያለው .env
ፋይል ላይ ማከም ትችላለህ። read
ቁልፍ የሚባለው public
ነው፣ እና read/write
ቁልፍ ደግሞ secret
ነው።
TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010
እባክዎን ምንም እንኳ ምስጢሩን read/write
API ቁልፍ ወደ ደንበኛ በስፋት ምርት አካባቢዎች አትፈታ።
እንከፍላለን ሁለት ተጨማሪ አካባቢ ተለዋዋጮች: TACOTRANSLATE_DEFAULT_LOCALE
እና TACOTRANSLATE_ORIGIN
.
TACOTRANSLATE_DEFAULT_LOCALE
: ነባሪ የመመለሻ አካባቢ ኮድ። በዚህ ምሳሌ ለእንግሊዝኛen
እንደምንሰጥ እናደርጋለን።TACOTRANSLATE_ORIGIN
: የእርስዎ ስትሪንግዎች የሚ保存 የ“ፎልደር” እንደ ድህረ ገጽዎ ድረ አድራሻ። ከእዚህ ስትሪንግዎች ስለ መሠረታዊ ምንጮች ተጨማሪ እይታ ያግኙ።
TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com
ደረጃ 3: ታኮትራንስሌት ማሰራት
TacoTranslate ከመተግበሪያዎ ጋር ለመያዝ፣ ከመጥፎ ቀደም ያለው ያሉ የAPI ቁልፎችን ተጠቅመው አንድ ክላየንት መፍጠር ይኖርቦታል። ለምሳሌ፣ /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 ባህሪያት ናቸው። በ getTacoTranslateStaticProps
ላይ ያለው revalidate
በነባሪ 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፡ አቅርብና ፈተና አድርግ!
ሥራችን ተጠናቀቀ! ሲሆን ከአሁን ጀምሮ በዚህ በ Translate
ኮምፖነንት ላይ ማንኛውንም የሚያክሉትን ስርዓታዊ ቃላት በማካተት የእርስዎ Next.js መተግበሪያ በራሱ ራሱ ይተረጉማል። እባክዎን ጥንቃቄ ያድርጉ፤ በ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!