በNext.js መተግበሪያ ውስጥ የ Pages Router ሲጠቀሙ የአለም አቀፍ ቋንቋ ማስተካከልን እንዴት መፈፀም

ዓለም ሲወዳድር፣ ለድር አሰራሮች (web developers) ለተለያዩ አገሮችና ባህላት የሚመጡ ተጠቃሚዎችን ለማገልገል የሚችሉ መተግበሪያዎችን መሰራት በእጅግ አስፈላጊ ነው። ይህን ለማሳካት ከጠቃሚ ዘዴዎች አንዱ ዋናው የአለም አቀፍ ማስተካከያ (internationalization, i18n) ሲሆን፣ ይህ መተግበሪያዎችዎን ለተለያዩ ቋንቋዎች፣ የገንዘብ አይነቶችና የቀን ቅርጾች ለማስተካከል ይችላል።

በዚህ መምሪያ እኛ ከserver-side rendering ጋር ለReact Next.js መተግበሪያዎችዎ እንዴት i18n እንደምንጨምር እንመለከታለን። 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 እናጠራዋለን. ለምሳሌ፣ እነዚህን ወደ ፕሮጀክትዎ ዋና (root) ፋይል ያለው .env ፋይል ማካተት ይችላሉ.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

በፍጹም እንዳትለፉ ምስጢራዊ read/write API ቁልፉን ወደ ክላይንት-ሳይድ ፕሮዳክሽን አካባቢዎች አታወጡ።

ደግሞ ሁለት ተጨማሪ የአካባቢ ተለዋዋጮች እንጨምራለን: TACOTRANSLATE_DEFAULT_LOCALE እና TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: የነባር የመድረሻ (fallback) የቋንቋ ኮድ። በዚህ ምሳሌ ለእንግሊዝኛ en እንሰጣለን።
• TACOTRANSLATE_ORIGIN: የጽሑፎችዎ የሚቀመጥበት “ፎልደር”፣ ለምሳሌ የድህረገጽዎ URL። ስለ ኦሪጅኖች ተጨማሪ መረጃ ለማግኘት እዚህ ይጫኑ።

TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com

እርምጃ 3: TacoTranslateን ማቋቋም

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 የትርጉሞችዎን በሰርቨር ጎን ላይ ማሳያ (server-side rendering) እንዲያካሂድ ይፈቀዳል። ይህ ተጠቃሚውን ልምድ በጣም ያሻሻላል፤ ትርጉም የተሰጠውን ይዘት በቀጥታ እንዲታይ ያደርጋል፣ ከዚህም በፊት የማይተረጉም ይዘት በመታየት የሚከሰት ጭንቀት ይቀንሳል። ተጨማሪም፣ የሚያስፈልጉትን ሁሉንም ትርጉሞች እንደምናገኝ ስለዚህ በክላይንት ላይ የኔትወርክ ጥያቄዎችን ማስፈለግ አልፈልግም።

በ /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 ቁልፍን ይገልጻል። በlocal, test, ወይም staging አካባቢ ሲሆን (isProduction is false)፣ አዲስ ጽሑፎች ለትርጉም እንዲልኩ ምስጢራዊ read/write API ቁልፍ እንጠቀማለን።

እስካሁን ድረስ፣ Next.js መተግበሪያዎን ከደጋፊ ቋንቋዎች ዝርዝር ብቻ እንደሰቀርን ነው። የሚቀጥለው የምንሠራው ሁሉንም ገፆችዎ የተረጉሙ ትርጉሞችን ማግኘት ነው። ይህን ለማከናወን፣ እርስዎ የሚፈልጉትን መስፈርት መሠረት getTacoTranslateStaticProps ወይም getTacoTranslateServerSideProps ይጠቀሙ።

እነዚህ ፋንክሽኖች ሶስት ፓራሜተሮች ይወስዳሉ: አንዱ Next.js Static Props Context ኦቤጅክት፣ ለTacoTranslate የቅንብር (configuration)፣ እና አማራጭ 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!"/>;
}

አሁን በReact ሁሉም ኮምፖነንቶችዎ ውስጥ ያሉትን ስትሪንግዎች ለማተርጎም የTranslate ኮምፖነንትን መጠቀም ይችላሉ።

import {Translate} from 'tacotranslate/react';

function Component() {
	return <Translate string="Hello, world!"/>
}

ደረጃ 5: አቅርቡ እና ሞክሩ!

እኛ ተጠናቀቅናል! የReact መተግበሪያዎ አሁን ሲወስዱ ወደ Translate ኮምፖነንት ማንኛውንም የጽሑፍ ሐረግ ሲጨምሩ በራሱ በራስ ይተረጉማል። እንዲሁም በAPI ቁልፉ ላይ read/write ፈቃድ ያላቸው አካባቢዎች ብቻ ለመተረጎም አዲስ ሐረጎችን ማፍጠር ይችላሉ። እኛ እንመክራለን የተዘጋና የደህንነት የተጠበቀ የstaging አካባቢ እንዲኖርዎት፣ በዚያ ላይ የAPI ቁልፉን በመጠቀም የምርት መተግበሪያዎን ለማረጋገጥ እና ከሂደቱ ዋና ላይ ለመሄድ በፊት አዲስ ሐረጎችን ማካተት። ይህ ማንም ማንም እንዳይሰርዙ የምስጢር API ቁልፍዎን ይከላከላል፣ እና ያልተዛመዱ አዲስ ሐረጎችን በማስጨመር የትርጉም ፕሮጀክትዎን እንዳይብዛ ይረዳል።

እባክዎ ሙሉውን ምሳሌ ይመልከቱ በGitHub ፕሮፋይላችን ላይ። በዚያ ደግሞ በApp Router እንዴት እንደሚሰራ የሚያሳየውን ምሳሌ ይገኛል! ማንኛውንም ችግኝ ካጋጠመዎት እባክዎ ያግኙን፣ እኛም ለመርዳት በጣም ደስ ይለናል።

TacoTranslate የReact መተግበሪያዎችን ከ75 ቋንቋዎች በላይ ወደ እና ከእነዚያ ወደ ሌሎች ቋንቋዎች በራስን በፍጥነት ይተርጉማል። ዛሬ ይጀምሩ!