በNext.js መተግበሪያ ውስጥ የ Pages Router ሲጠቀሙ ኢንተርናሽናሊዘሽን (internationalization) እንዴት መፈፀም እንደሚቻል

ዓለም እየተዋሃደ እንደሚሆን፣ ለድር አባላት ለተለያዩ አገሮችና ባህላት የሚመለከቱ ተጠቃሚዎችን የሚያገለግሉ መተግበሪያዎችን ማንቀሳቀስ በጣም አስፈላጊ ሆኗል። ይህን ለማግኘት ከሚያግዙ ቁልፍ መንገዶች አንዱ በዓለም-አቀፍ ማስተካከያ (i18n) ነው፣ ይህም መተግበሪያዎን ወደ ተለያዩ ቋንቋዎች፣ የገንዘብ አይነቶች እና የቀን ቅርጾች ለማስለዋወጥ ይፈቅዳል።

በዚህ መምሪያ እንዴት እንደምንጨምር ለReact Next.js መተግበሪያዎ ዓለም-አቀፍ ማስተካከያ (i18n) ከserver side rendering ጋር እንዴት እንደምንያዘምን እንመለከታለን። TL;DR: እዚህ ሙሉውን ምሳሌ ይመልከቱ።

ይህ መመሪያ ለ በ Pages Router የሚሰሩ Next.js መተግበሪያዎች ነው።
እርስዎ 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 ቁልፍ ፍጠር. እነዚህን እንደ የአካባቢ ተለዋዋጮች (environment variables) እናያስቀምጣለን. የ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: የነባር የመመለሻ የአካባቢ ኮድ። በዚህ ምሳሌ፣ ለእንግሊዝኛ 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 ቁልፍን ያሳያል። ካለን በአካባቢ፣ በፈተና ወይም በማዘጋጃ አካባቢ (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: አቀርቡ እና ይፈትኑ!

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

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

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