በNext.js መተግበሪያዎች ውስጥ ለአለም አቀፍ ማስተካከያ (i18n) ምርጥ መፍትሄ

እንዴት እንደሚሰራ

ከዓለም የበለጠ በአለም አቀፍ ሁኔታ ሲሆን፣ ለድር ስራ አሰራሮች ከተለያዩ ሀገራትና ባህላዊ ተጠቃሚዎች ለማገልገል እንዲችሉ መተግበርያዎች መገንባት እጅግ አስፈላጊ ነው። ይህን ለማስቻል የተፈለገው አንዱ አሰራር በዓለም አቀፍ አስተዋፅኦ (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!