በNext.js የሚሰራና Pages Router የሚጠቀም መተግበሪያ ውስጥ የአለም አቀፍ ቋንቋ ማስተካከያን እንዴት እንደምንፈፀም

እንደ ዓለም እንደበለጠ ዓለም አቀፍ ሲሆን፣ ለድህረ መረብ ሰራተኞች ከተለያዩ አገሮችና ማህበረሰቦች ተጠቃሚዎች ለመስጠት መቻል ያለበት መተግበሪያዎችን ማንቀሳቀስ በጣም አስፈላጊ ነው። ይህን ለማድረግ ከሚያግዙ ዋና መንገዶች አንዱ በአለም አቀፍ ልዩነት (i18n) ነው፣ ይህም መተግበሪያዎን ወደ ተለያዩ ቋንቋዎች፣ ገንዘብ አይነቶችና የቀን ቅርጾች ለማስተካከል ይፈቅዳል።

በዚህ መምሪያ ውስጥ፣ ለReact Next.js መተግበሪያዎ ከ server side rendering ጋር እንዴት አለም አቀፍ ልዩነት ማስገባት እንደሚቻል እንመለከታለን። 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 ቁልፍ ይፍጠሩ። እነሱን እንደ አካባቢ ተለዋዋጮች (environment variables) እንያስቀምጣለን። read ቁልፉ የምናለው public ነው፣ እና read/write ቁልፉም secret ነው። ለምሳሌ፣ እነሱን ወደ በፕሮጀክትዎ መሠረት (root) ያለው .env ፋይል ውስጥ ማካተት ይችላሉ።

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

ምንም ሁኔታ ውስጥ ምስጢሩ read/write የAPI ቁልፍን ወደ client-side ፕሮዳክሽን አካባቢዎች አትጋለጡ።

እንዲሁም ሌሎች ሁለት የአካባቢ ተለዋዋጮች እንጨምራለን: TACOTRANSLATE_DEFAULT_LOCALE እና TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: ይህ የነባሪ የመመለስ ሎካል ኮድ ነው። በዚህ ምሳሌ ለእንግሊዝኛ ወደ en እናደርጋለን።
• TACOTRANSLATE_ORIGIN: የሚያስቀምጥበት “ፎልደር”፣ ለምሳሌ የድህረገጹ ዩአርኤል ነው። ስለ መነሻዎች ተጨማሪ መረጃ እዚህ ይነብቡ።

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 ለትርጉሞችዎ የሰርቨር ክፍል ላይ የሚከናወን ማሳያ ይፈቀዳል። ይህ ትርጉም ያለውን ይዘት በቀጥታ በማሳየት የተጠቃሚ ልምድን በጣም ያሻሽላል፤ በመጀመሪያ የማይተረጉም ይዘት የሚታይ ፍጥነት (flash) እንዳይኖር ይረዳል። ተጨማሪም፣ እኛ ያለን የሁሉም ትርጉሞች ስለሆነ በክላይንት ላይ የኔትወርክ ጥያቄዎችን ማስወገድ እንችላለን።

እኛ በ /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 የህዝብ ኤፒአይ ቁልፍ ላይ ይውላል. በአካባቢያዊ, ፈተና, ወይም መድረክ አካባቢ (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!"/>;
}

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

import {Translate} from 'tacotranslate/react';

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

ደረጃ 5: አቀሙ እና ይሞክሩ!

ሁሉም ተጠናቀቀ። የReact መተግበሪያዎ አሁን ማንኛውንም ሀረግ ወደ Translate ኮምፖነንት ሲጨምሩ በራስ-ሰር ይተርጉማል። እባክዎን ያስታውሱ፤ በAPI ቁልፉ ላይ read/write ፈቃድ ያላቸው አካባቢዎች ብቻ አዲስ ሀረጎችን ለመፍጠር ይችላሉ። እኛ እንመክራለን ዝጋ እና ደህንነታማ የስቴጅ አካባቢ እንዳለዎት ያዘጋጁ፣ በእርሱ የAPI ቁልፍ እየሞከራ የሚሰራውን የምርት መተግበሪያዎን በዚያ ይፈትሹና ከህዋሳ ቀደም አዲስ ሀረጎችን ይጨምሩ። ይህ የሚስጥር API ቁልፍዎን ከማስቀስቀስ ይከለክላል እና ያልተያያዙ አዲስ ሀረጎችን በመጨመር የትርጉም ፕሮጀክትዎን እንዳይደክም ይረዳል።

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

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