በNext.js መተግበሪያ ውስጥ የ Pages Router የሚጠቀሙ ሲሆን፣ የአለማዊ ቋንቋ (internationalization)ን እንዴት እንደምንፈፀም

ዓለም እየተዋበ ሲሆን፣ ከተለያዩ አገሮችና ባህላት የሚመጡ ተጠቃሚዎችን ለማገልገል የድር አባላት መተግበሪያዎችን ማቀናበር እየጨምረ ነው። ይህን ለማሳካት ከሚጠቅሙ ቁልፍ መንገዶች አንዱ ኢንተርናሽናላይዜሽን (i18n) ነው፣ ይህም መተግበሪያዎን ወደ በርካታ ቋንቋዎች፣ ምንዛሬዎች እና የቀን ቅርጾች ለማስተካከል ይፈቅዳል።

በዚህ መምሪያ ውስጥ፣ ከሰርቨር-ክፍለ-ጊዜ ሪንደሪንግ ጋር ለReact Next.js መተግበሪያዎ ኢንተርናሽናላይዜሽን እንዴት እንደሚጨምር እንመለከታለን። TL;DR: ሙሉውን ምሳሌ እዚህ ይመልከቱ።

ይህ መመሪያ ለ Next.js ውስጥ Pages Router እየጠቀሙ የሚገኙ መተግበሪያዎች ነው።
እርስዎ App Router እየጠቀሙ ከሆኑ፣ እባክዎ ይህን መመሪያ ይመልከቱ።

ደረጃ 1: i18n ላይብራሪ ያጫኑ

በNext.js መተግበሪያዎ ውስጥ የአለም አቀፍ ቋንቋ (internationalization) ለማስፈፀም እኛ በመጀመሪያ የ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 የትርጉሞችዎን በሰርቨር ላይ እንዲታዩ ያስችላል። ይህ ተጠቃሚውን ልምድ በጣም ያሻሽላል፤ የተተረጉሙ ይዘቶችን በፈጣን ሁኔታ ይታያሉ፣ እንጂ መጀመሪያ የማይተረጉሙ ይዘቶች በጥቂት ጊዜ እንዳይታዩ። በተጨማሪም፣ የሚያስፈልጉትን ሁሉ ትርጉሞች እንዳሉ ስለሆነ በክላይንት ላይ የኔትወርክ ጥያቄዎችን ማስወገድ ይቻላል።

እኛ በ /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!"/>;
}

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

import {Translate} from 'tacotranslate/react';

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

ደረጃ 5: ማቅረብ እና ሙከራ!

ስራው ተጠናቋል! ከእርስዎ ወደ Translate ኮምፖነንት ማንኛውንም ሐረግ ሲጨምሩ፣ የReact መተግበሪያዎ አሁን በራስ-ራስ ይተረጉማል። ማስታወሻ፦ ለAPI ቁልፉ የread/write ፈቃድ ያላቸው አካባቢዎች ብቻ ለመተረጎም አዲስ ሐረጎችን ማፍጠር ይችላሉ። እኛ እንመክራለን ዝጋታና ደህንነታዊ የstaging አካባቢ እንዲኖሩ፣ በዚያ ውስጥ እንደዚህ ያለ የAPI ቁልፍ በመጠቀም የምርት መተግበሪያዎን ለማረጋገጥ እና ከሕይወት ላይ ሲወጣ ከዚያ በፊት አዲስ ሐረጎችን ማክለት ይመከራል። ይህ ማንም ማንም የሚስጥራዊ የAPI ቁልፉን እንዳይወስድ ይከላከላል፣ እና ያልተዛመዱ አዲስ ሐረጎችን በመጨመር የትርጉም ፕሮጀክትዎን ሊጭነቅ ይችላል።

እባክዎን በGitHub ፕሮፋይላችን ላይ ሙሉ ምሳሌውን ይመልከቱ። እዚያ ደግሞ በApp Router በመጠቀም ይህን እንዴት እንደሚደረግ የሚያሳየውን ምሳሌ ታገኛላችሁ! ማንኛውንም ችግር ቢጋጥማችሁ ያግኙን፣ እኛም በደስታ እንረዳችኋለን።

TacoTranslate የReact መተግበሪያዎችን በ75 ቋንቋዎች በላይ ወደ እና ከእነዚህ ቋንቋዎች ወደ ሌሎች ቋንቋዎች በራሱ ፈጣን መንገድ ይተርጎማል። ዛሬ ይጀምሩ!