እንዴት በNext.js መተግበሪያ ውስጥ የአለም አቀፍ ቋንቋ ዝግጅት (internationalization) እንደሚፈጸም በApp Router በመጠቀም

እንደ ዓለም እየተአካባበረ እንደሆነ፣ ለድር አቀማመጥ ሰራተኞች ከተለያዩ መንግሥታትና ባህላት ተጠቃሚዎች ለማገልገል መተግበሪያዎችን ማዋቀር በጣም አስፈላጊ ሆነ። ይህን ለማሳካት አንዱ ከቁልፍ መንገዶች የአለም አቀፍ ፍተሻ (i18n) ነው፣ ይህም መተግበሪያዎትን ለተለያዩ ቋንቋዎች፣ ምንዛሬዎችና የቀን ቅርጸቶች ለማስተካከል ይፈቅዳል።

በዚህ ምንጭ፣ ለ React Next.js መተግበሪያዎ ከአገልጋይ አጠገብ አቀማመጥ ጋር አለም አቀፍ ፍተሻ ማከል እንዴት እንደሚቻል እንገልጻለን። TL;DR: እዚህ ሙሉውን እናሳያለን።

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

ደረጃ 1፡ አንድ i18n ቤተ-መፃህፍት ያግኙ

እባክዎን በNext.js ማብራሪያዎ ውስጥ አለም አቀፍ ትርጉም ለማስፈፀም ከመጀመሪያ አንድ የi18n ቤተ-መፃህፍት እንምረጥ። ብዙ የታወቁ ቤተ-መፃህፍቶች አሉ፣ ከእነዚህም next-intl ተወዳጅ ነው። ነገር ግን በዚህ ምሳሌ እንደ TacoTranslate ተጠቀምናለን።

TacoTranslate ከጥቅምት ተደጋጋሚ ኤአይ ተጠቃሚ ላይ ተመስርቶ ማንኛውንም ቋንቋ ለማትረጉም በራሱ የሚሰራ ሲሆን ከJSON ፋይሎች አስቸጋሪ አስተዳደር ይነፍሳል።

በእርስዎ ተለን በnpm ማእከል እንጫን።

npm install tacotranslate

ደረጃ 2፦ ነፃ የሆነ የTacoTranslate መለያ ፍጠር

አሁን ሞጁሉን ከጭነው በኋላ፣ የእርስዎን TacoTranslate መለያ፣ ትርጉም ፕሮጀክት እና ተዛማጅ የAPI ቁልፎች ለመፍጠር ሰዓት ነው። እዚህ መለያ ይፍጠሩ። ነፃ ነው፣ እና ክሪዲት ካርድ ማከል አያስፈልግዎትም።

በTacoTranslate መተግበሪያ UI ውስጥ፣ ፕሮጀክት ፍጠር እና ወደ የAPI ቁልፎቹ ትምህርት ትሄድ። አንድ read ቁልፍ እና አንድ read/write ቁልፍ ፍጠር። እነዚህን እንደ አካባቢ ለውጦች እንደምን እንደምን እንቆጣጠር። 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፡ የመደበኛው የተመላላሽ ቋንቋ ኮድ። በዚህ ምሳሌ እኛ እንንደ እንግሊዝኛ en እንደምንሰጥ ነው።
• TACOTRANSLATE_ORIGIN፡ እርስዎ የሚያከማቹት ነጥቦች የሚጠቀሙበት “ፎልደር”፣ እንደ ድህረገፅዎ ዩአርኤል ያሉበት ፣ እንዲሁም እዚህ ስለ መነሻዎች ተጨማሪ ንባብ ያድርጉ።

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 ሰከንድ በኋላ ገፁን እንደገና ለማዘጋጀት እና ትርጉሞችዎን እንዲያስቀምጥ ይነገራል።

ደረጃ 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 ቁልፍ አሳያል። እኛ በአካባቢ ፣ ሙከራ ወይም በማቅረብ አካባቢ (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 ቁልፍ የሚሰራውን የምርት መተግበሪያ በመሞከር ከመኖር በፊት አዲስ ሐረጎችን በማከማቸት የተዘጋ እና ደህና የተጠበቀ የማያውቀው አካባቢ ማለት ነው። ይህም ማንኛውንም ሰው የሚሰውርህ የ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!