በNext.js መተግበሪያዎች ላይ ለቋንቋ ለውጥ (i18n) የሚሰጥ ምርጥ መፍትሄ

እንዴት እንደሚሰራ

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

በዚህ መመሪያ፣ ከserver-side rendering ጋር የReact Next.js መተግበሪያዎ ውስጥ እንዴት የinternationalization ማስገባት እንደምንችል እንወራለን። TL;DR: እዚህ ሙሉውን ምሳሌ ይመልከቱ።

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

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

Next.js መተግበሪያዎት ላይ አለም አቀፍ ቋንቋ ዝግጅት (internationalization) ለማስፈፀም፣ መጀመሪያ አንድ i18n ቤተ-መፅሄት እንመርጥ። ብዙ የተወደዱ ቤተ-መፅሄቶች አሉ፣ በእነዚህም next-intl. ነገር ግን፣ በዚህ ምሳሌ እኛ TacoTranslate-ን እንጠቀማለን።

TacoTranslate በዘመናዊ ኤአይ መሣሪያዎች በመጠቀም ያሉትን ጽሁፎች ወደ ማንኛውም ቋንቋ በራሱ ይተርጉማል፣ እና የJSON ፋይሎችን የሚያስጨንቅ አስተዳደር ከእርስዎ ይወገዳል።

እንዲህ በተርሚናልዎ በnpm እንጫኑ:

npm install tacotranslate

ደረጃ 2: ነፃ የTacoTranslate መለያ ይፍጠሩ

ሞጁሉን ከጫነዎ በኋላ፣ የTacoTranslate አካውንትዎን፣ የትርጉም ፕሮጀክትን እና የጋራውን API ቁልፎችን ለመፍጠር ጊዜው ደርሷል። እዚህ አካውንት ይፍጠሩ። ነጻ ነው፣ እና የክሬዲት ካርድ ማስገባት አያስፈልግም።

በTacoTranslate መተግበሪያ የUI ገፅ ውስጥ፣ ፕሮጀክት ፍጠር እና ወደ የAPI ቁልፍ ትር ይሂዱ። አንድ read ቁልፍ እና አንድ read/write ቁልፍ ይፍጠሩ። እነዚህን እንደ environment variables እናደርጋለን። የread ቁልፍ የምንጠራው public ነው፣ እና የread/write ቁልፍ ደግሞ secret ነው። ለምሳሌ፣ እነዚህን በፕሮጀክትዎ ሩብ የሚገኝ .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: የስታርንግዎ የሚ 저장 “ፎልደር” ነው — ለምሳሌ የድህረ-ገፅዎ ዩአርኤል። ስለ መነሻዎች ተጨማሪ መረጃ እዚህ ያንብቡ።

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 ፕሮቫይደርን እንጨምራለን።

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 ምርመራውን ለስብስብዎ ያስተካክሉ። If 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: አቀርቡ እና ይፈተኑ!

ተጠናቀቀ! ከእንግዲህ በTranslate ኮምፖነንት ላይ ማንኛውንም የጽሑፍ ሕትመት ሲጨምሩ የNext.js መተግበሪያዎ በራሱ ይተረጉማል። ማስታወሻ፡- ከAPI ቁልፉ ላይ read/write ፈቃድ ያላቸው አካባቢዎች ብቻ የሚተረጉሙ አዲስ ሕትመቶችን ማፍጠር ይችላሉ። እኛ እንመክራለን—ከዚህ ዓይነት የAPI ቁልፍ ጋር የሚፈተኑበትን የproduction መተግበሪያዎን ለማስፈተና ዝጋና የደህንነት የተጠናቀቀ የstaging አካባቢ ማኖርን እንመክራለን፣ እስካለመግባት በፊት አዲስ ሕትመቶችን ማከማት ይችላሉ። ይህ ማንም ማንም ከእርስዎ የሚስጥር የAPI ቁልፍ ማሰቀርያ እንዳይሰርዝ፣ እና በተጨማሪም ያልተዛመዱ አዲስ ሕትመቶችን በማካተት የትርጉም ፕሮጀክትዎን እንዳይደክም ይከላከላል።

Be sure to check out the complete example over at our GitHub profile. There, you’ll also find an example of how to do this using the App Router! If you encounter any problems, feel free to reach out, and we’ll be more than happy to help.

TacoTranslate lets you automatically localize your React applications quickly to and from over 75 languages. Get started today!