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

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

በዚህ ጽሑፍ ውስጥ፣ ከሰርቨር በታች ማቅረብ (server-side rendering) ጋር የReact Next.js መተግበሪያዎን የኢንተርናሽናላይዜሽን እንዴት እንደማካተት እንያያለን። TL;DR: ሙሉውን የምሳሌ ኮድ እዚህ ይመልከቱ።

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

ደረጃ 1: i18n ላይብራሪን አጫኑ

በNext.js መተግበሪያዎ ውስጥ ኢንተርናሽናላይዜሽንን ለማስፈጸም፣ አስቀድሞ የi18n ላይብራሪ እንምረጥ። ብዙ የተወደዱ ላይብራሪዎች አሉ፣ ከነዚህም next-intl አንዱ ነው። በዚህ ምሳሌ ግን፣ እኛ TacoTranslate እንጠቀማለን።

TacoTranslate በዘመናዊ AI ስር ስትሪንግሶችዎን ወደ ማንኛውም ቋንቋ በራሱ ይተረጉማል፣ እና ከ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 ቁልፍ ወደ client-side የproduction አካባቢዎች አታወጡ።

እንዲሁም ሌሎች ሁለት የአካባቢ ተለዋዋጮችን እንደጨምር: 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'; ያስታውሱ።

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 ተለዋዋጩን ያስታውሱ፤ ይህ በ60 ሰከንድ በኋላ Next.js ገፁን እንዲደገፍ እና የትርጉሞችዎን አዘምነት እንዲጠብቅ ያደርጋል።

ደረጃ 4: የሰርቨር ክፍል ማቅረብን ማስፈፀም

TacoTranslate የሰርቨር በኩል ማቅረብ (server-side rendering) ይደግፋል። ይህ ተጠቃሚው ልምድን በጣም ያሻሻል፤ ተተረጉሙ ይዘቶችን በቅድሚያ በፍጥነት ሲያሳይ ከዚያም በፊት የማይተረጉሙ ይዘቶች የሚታዩበት አጭር ማሳያ (flash) እንዳይኖር ይረዳል። ተጨማሪም፣ በክላይንት ላይ የኔትወርክ ጥያቄዎችን ማስወገድ እንችላለን፣ ምክንያቱም ተጠቃሚው የሚመለከተውን ገፅ ለመብረር የሚያስፈልጉትን ትርጉሞች እንዳለን ነው።

የሰርቨር-ሳይድ ሪንደሪንግን ለማቋቋም፣ /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!