በ App Router የሚጠቀም Next.js መተግበሪያ ውስጥ ኢንተርናሽናላይዜሽን (internationalization)ን እንዴት ማስፈፀም

ዓለም እየተለዋዋጭ እንደሆነ፣ ከተለያዩ ሀገራትና ባህላት የመጡ ተጠቃሚዎችን ለማገናኘት የድር አቀራረብ ሰራተኞች መተግበሪያዎችን ማዘጋጀት እጅግ አስፈላጊ ነው። ይህን ለማሳካት ከጠቃሚ መንገዶች አንዱ የአለማቀፍ ቋንቋ ማስተካከያ (internationalization, i18n) ነው፣ ይህም መተግበሪያዎን ወደ ተለያዩ ቋንቋዎች፣ የገንዘብ ስርዓቶችና የቀን ቅርጾች ለማስተካከል ይፈቅዳል።

በዚህ ጽሑፍ እንዴት ለReact Next.js መተግበሪያዎ አለማቀፍነትን (i18n) ከserver side rendering ጋር ማክሰን እንደምንችል እንወያያለን. TL;DR: የሙሉውን ምሳሌ እዚህ ይመልከቱ።

ይህ መመሪያ ለ በ App Router የሚጠቀሙ የ Next.js መተግበሪያዎች ነው።
ከ Pages 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 ቁልፎችን በመጠቀም አገልጋይ (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_IS_PRODUCTION === 'true'
			? process.env.TACOTRANSLATE_PROJECT_LOCALE
			: undefined,
});

module.exports = tacoTranslate;

እኛ እነዚህ TACOTRANSLATE_API_KEY እና TACOTRANSLATE_PROJECT_LOCALE በራሳዊ ሁኔታ በቅርብ ጊዜ እንያዘጋጃለን።

ክላይንቱን በተለየ ፋይል ላይ መፍጠር እንደገና በቀላሉ ለማጠቀም ያስችላል። getLocales የመሣሪያ ፋንክሽን ብቻ ነው፣ እና ከእሱ ጋር አንዳንድ የተገነባ የስህተት አያያዝ ይኖራል። አሁን ስምዋ የሚሰጠውን ፋይል /app/[locale]/tacotranslate.tsx ይፍጠሩ፣ እዚህ የ TacoTranslate አቅራቢ እንፈፀማለን።

'use client';

import React, {type ReactNode} from 'react';
import {
	type TranslationContextProperties,
	TacoTranslate as ImportedTacoTranslate,
} from 'tacotranslate/react';
import tacoTranslateClient from '@/tacotranslate-client';

export default function TacoTranslate({
	locale,
	origin,
	localizations,
	children,
}: TranslationContextProperties & {
	readonly children: ReactNode;
}) {
	return (
		<ImportedTacoTranslate
			client={tacoTranslateClient}
			locale={locale}
			origin={origin}
			localizations={localizations}
		>
			{children}
		</ImportedTacoTranslate>
	);
}

ይህ እንደ ክላይንት ኮምፖነንት እንዳለ የሚያመለክተውን 'use client'; ያስታውሱ።

ከcontext አቅራቢው አሁን ዝግጁ ሲሆን፣ በመተግበሪያችን ውስጥ ዋና የገጽ ቅርጽ የሆነውን ፋይል በስም /app/[locale]/layout.tsx ይፍጠሩ። ይህ መንገድ Dynamic Routes የሚጠቀም ፎልደር እንዳለው ያስታውሱ፣ እና [locale] የዲናሚክ ፓራሜተር ነው።

import React, {type ReactNode} from 'react';
import {type Locale, isRightToLeftLocaleCode} from 'tacotranslate';
import './global.css';
import tacoTranslateClient from '@/tacotranslate-client';
import TacoTranslate from './tacotranslate';

export async function generateStaticParams() {
	const locales = await tacoTranslateClient.getLocales();
	return locales.map((locale) => ({locale}));
}

type RootLayoutParameters = {
	readonly params: Promise<{locale: Locale}>;
	readonly children: ReactNode;
};

export default async function RootLayout({params, children}: RootLayoutParameters) {
	const {locale} = await params;
	const origin = process.env.TACOTRANSLATE_ORIGIN;
	const localizations = await tacoTranslateClient.getLocalizations({
		locale,
		origins: [origin /* , other origins to fetch */],
	});

	return (
		<html lang={locale} dir={isRightToLeftLocaleCode(locale) ? 'rtl' : 'ltr'}>
			<body>
				<TacoTranslate
					locale={locale}
					origin={origin}
					localizations={localizations}
				>
					{children}
				</TacoTranslate>
			</body>
		</html>
	);
}

የመጀመሪያው ማስታወሻ እንዲህ ነው፡ እኛ የምንጠቀምበት Dynamic Route ፓራሜተር [locale] ለዚያ ቋንቋ ትርጉሞችን ለማግኘት እንደምንጠቀም ነው። ተጨማሪም፣ generateStaticParams ለፕሮጀክትዎ የቋንቋ ኮዶችን ሁሉ በቅድሚያ እንዲቀርቡ እንደሚያረጋግጥ ያደርጋል።

አሁን የመጀመሪያውን ገፅ እንሠራ! የሚከተለው ስም ያለውን ፋይል ፍጠር /app/[locale]/page.tsx.

import React from 'react';
import {Translate} from 'tacotranslate/react';

export const revalidate = 60;
export default async function Page() {
	return (
		<Translate string="Hello, world!" />
	);
}

ያስታውሱ revalidate ተለዋዋጭ፣ ይህም Next.js ገፁን ከ60 ሰከንዶች በኋላ እንደገና እንዲገነባ ይነግራል እና ትርጉሞቻችሁን ወቅታዊ ይጠብቃል።

ደረጃ 4: የሰርቨር ወገን መታየትን ማፈጸም

TacoTranslate የሰርቨር በኩል ማቅረብ (server-side rendering) ይደግፋል። ይህ ትርጉም ያለውን ይዘት ወዲያውኑ በማሳየት የተጠቃሚ ልምድን በጣም ያሻሽላል፤ በመጀመሪያ የማይተረጉም ይዘት እንደ ፍላሽ ሳትታይ ነው። ተጨማሪም፣ ተጠቃሚው የሚመለከተው ገፅ ለሚያስፈልጉት ትርጉሞች እንዳለን ስለሆነ በክላይንት የኔትወርክ ጥያቄዎችን ማስወገድ ይቻላል።

የሰርቨር ዳሰሳ (server-side rendering) ለማቋቋም, /next.config.js:

const withTacoTranslate = require('tacotranslate/next/config').default;
const tacoTranslateClient = require('./tacotranslate-client');

module.exports = async () => {
	const config = await withTacoTranslate(
		{},
		{
			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'),
		}
	);

	// NOTE: Remove i18n from config when using the app router
	return {...config, i18n: undefined};
};

የ isProduction ምርመራን ለስርዓትዎ ሁኔታ ያስተካክሉ። ከ true ከሆነ፣ TacoTranslate የህዝብ API ቁልፍን ያሳያል። ካለን በአካባቢ, ሙከራ, ወይም staging አካባቢ ውስጥ (isProduction is false)፣ አዲስ ጽሑፎች ለትርጉም እንልክ ዘንድ ምስጢራዊ read/write API ቁልፍን እንጠቀማለን።

እንዲሁም መሪነትና ዳግም መመለስ እንደተጠበቀ እንዲሰሩ ለማረጋገጥ, /middleware.ts የሚባለውን ፋይል ማፍጠር ያስፈልጋል። በMiddleware, ተጠቃሚዎችን ወደ በሚመለከቱት ቋንቋ የታቀዱ ገፆች ማመለስ እንችላለን።

import {type NextRequest} from 'next/server';
import {middleware as tacoTranslateMiddleware} from 'tacotranslate/next';
import tacoTranslate from '@/tacotranslate-client';

export const config = {
	matcher: ['/((?!api|_next|favicon.ico).*)'],
};

export async function middleware(request: NextRequest) {
	return tacoTranslateMiddleware(tacoTranslate, request);
}

እባክዎ የ matcher መዋቅርን እንደ Next.js Middleware ሰነዶች ያስተካክሉ እና ያረጋግጡ።

በክላይንት፣ የlocale ኩኪን ለማስተካከል ይችላሉ፣ እንዲሁም የተጠቃሚው የፈለገው ቋንቋ ይለወጣል። እባክዎ ለዚህ እንዴት እንደሚደረግ ሃሳቦችን ለማግኘት የሙሉው ምሳሌ ኮድ ይመልከቱ!

ደረጃ 5: አቀርቡ እና ሞክሩ!

ሥራው ተጠናቆል! ወደ Translate ኮምፖነንት ማንኛውንም ስትሪንግ ሲጨምሩ፣ የReact መተግበሪያዎ ከአሁን ጀምሮ በራሱ ይተረጉማል። እባክዎን ያስታውሱ፥ በ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 Pages 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!