በ App Router የሚጠቀሙ Next.js መተግበሪያ ውስጥ አለም አቀፍ ቋንቋ ማስተካከያን (internationalization) እንዴት መፈፀም እንደሚቻል

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

በዚህ ጽሑፍ ውስጥ፣ ከሰርቨር ጋር የሚሰራ የReact Next.js መተግበሪያዎችን በኢንተርናሽናሊዜሽን እንዴት እንደምንጨምር እንረዳለን። 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: የመደገፊያ (fallback) የቋንቋ ኮድ። በዚህ ምሳሌ ለእንግሊዝኛ እንዲሆን 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_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'; ያስታውቁ።

ኮንተክስት ፕሮቫይደሩ አሁን ለመጠቀም ዝግጁ ሲሆን፣ የሚባለውን ፋይል /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 ሰከንዶች በኋላ በድጋሚ እንዲገነባ እና የትርጉሞችዎን ወቅታዊ እንዲጠብቁ ይነግራል.

Step 4: በሰርቨር ላይ የገጽ ማቅረብ ማስፈፀም

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

የሰርቨር-ሳይድ ሪንደሪንግን ለማቋቋም, /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 ቁልፍን ያሳያል። በ local, test ወይም staging አካባቢ (isProduction is false) ከሆንን፣ አዲስ ሀረጎች ለትርጉም እንዲልኩ ለማረጋገጥ ምስጥራዊ read/write API ቁልፍን እንጠቀማለን።

የመንገድ መርምሮና የእንደገና መቀየር (redirection) እንደተገባ እንዲሠሩ ለማረጋገጥ, /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 መተግበሪያዎ በራሱ ይተርጉማል። እባክዎን ያስታውሱ፣ ብቻ የread/write ፈቃድ ያላቸው አካባቢዎች በዚያ የAPI ቁልፍ ይንደግፉ አዲስ የሚተርጉሙ ጽሁፎችን ሊፈጥሩ ይችላሉ። እኛ የተዘጋና ደህንነታዊ የstaging አካባቢ እንዳለዎት እንመክራለን፣ እዚያ በእንዲህ ዓይነት የAPI ቁልፍ ማለት የሚኖረው ሲሆን ለፕሮዳክሽን መተግበሪያዎ እዚያ ላይ መለያየትና አዲስ ጽሁፎችን ከመክፈት በፊት ማስገባት ይችላሉ። ይህ ከማንኛውም ሰው የሚያጣል ምስጢራዊ 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!