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

ዓለም ሲዋረድ እና የዓለም አቀፍ ግንኙነት ሲጨምር፣ ለተለያዩ ሀገሮችና ባህላት ያሉ ተጠቃሚዎችን ሊያገለግሉ የሚችሉ መተግበሪያዎችን ለማምረት ለድር አሰራሮች እጅግ አስፈላጊ ነው። እነዚህን ለማሳካት ከዋና ዘዴዎች አንዱ ኢንተርናሽናላይዜሽን (i18n) ነው፣ ይህም መተግበሪያዎን ወደ ተለያዩ ቋንቋዎች፣ ምንዛሬዎች፣ እና የቀን ቅርጾች ለማስተካከል ይፈቅዳል።

በዚህ መመሪያ፣ የReact Next.js መተግበሪያዎን ከሰርቨር ጎን ላይ በሚታይ (server side rendering) መጠቀም እንዴት ኢንተርናሽናላይዜሽን ማክለፍ እንችላለን እንያያለን። TL;DR: ሙሉ ምሳሌውን እዚህ ይመልከቱ.

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

እርምጃ 1: i18n ላይብራሪ ያጫኑ

በNext.js መተግበሪያዎ ውስጥ ዓለም አቀፍ ማስተካከያ (internationalization) ለማስፈፀም፣ መጀመሪያ የi18n ቤተ-ስብከት (library) እንምረጥ። ብዙ የተወደዱ ቤተ-ስብከቶች አሉ፣ ከነዚህ ውስጥ 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: የነባሪ የመመለስ አካባቢ (locale) ኮድ። በዚህ ምሳሌ እንግሊዝኛ ለማድረግ en እንሰጣለን።
• TACOTRANSLATE_ORIGIN: የስትሪንግዎች የሚያስቀምጥ “ፎልደር”፣ ለምሳሌ የድህረገፅዎ URL ይሆናል። ስለ መነሻዎች ተጨማሪ ያነቡ።

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

እርምጃ 3: TacoTranslate ማቋቋም

TacoTranslateን ከመተግበሪያዎ ጋር ለማገናኘት፣ ከዚህ በፊት የቀረቡትን API ቁልፎች በመጠቀም አንድ ክላይንት (client) መፍጠር ይኖርቦታል። ለምሳሌ፣ /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 provider እንጨምራለን።

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, እባክዎ ከላይ የተጠቀሱትን ባህሪዎችና ኮድ በመጨመር መግለጫውን ያስፋፉ።

Step 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 የህዝብ (public) API ቁልፍን ያሳያል። በlocal፣ test ወይም staging አካባቢ (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 ቁልፍ እንዲፈትሹ እና ከመቀጠል በፊት አዲስ ስትሪንግሶችን ያክሉ። ይህ እንዲያስከትል ማንም ማንም የሚስጥራዊ API ቁልፍዎን እንዳይሰርዝ እና ያልተገናኙ አዲስ ስትሪንግሶችን በማስጨመር የትርጉም ፕሮጀክትዎን እንዳይጨምር ይረዳል።

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

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