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

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

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

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

Step 1: i18n ላይብራሪን ያጫኑ

በNext.js መተግበሪያዎ ውስጥ የቋንቋ አስተካከያ (internationalization) ለማስፈፀም በመጀመሪያ i18n ላይብራሪ እንመርጣለን። ብዙ የተወደዱ ላይብራሪዎች አሉ፣ ከነዚህም next-intl አንዱ ነው። ነገር ግን በዚህ ምሳሌ እኛ TacoTranslate እንጠቀማለን።

TacoTranslate በዘመናዊ የAI ቴክኖሎጂ በመጠቀም የእርስዎን ጽሑፎች ወደ ማንኛውም ቋንቋ በራሱ ይተርጉማል፣ እና የJSON ፋይሎችን የሚያስጨንቀውን አስተዳደር ከእርስዎ ይወስዳል።

እንዲህ በማለት በመስመር ላይ (terminal) በ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: የሚያስቀምጡበት “ፎልደር”፣ ለምሳሌ የድር ጣቢያዎ ዩአርኤል። ስለ መነሻዎች በተጨማሪ እዚህ ያነቡ።

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 ለፕሮጀክትዎ የተኩተቱ ሁሉንም የlocale ኮዶች ቀድሞ እንዲወጡ ያረጋግጣል።

አሁን፣ የመጀመሪያውን ገፅ እንገነባለን! ፋይል በስም /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) ይደገፋል። ይህ ትርጉም ያሉ ይዘቶችን በፍጥነት በቀጥታ ማሳየት የተጠቃሚውን ልምድ በጣም ያሻሻላል፤ ከመጀመሪያ ያልተተረጉሙ ይዘቶች የሚበረክቱ እንጨት እንደሆነ የሚታይ ፍጥነ ግጭት አይኖርም። ተጨማሪም፣ በክላይንት ላይ የኔትወርክ ጥያቄዎችን ማስወገድ እንችላለን፣ ምክንያቱም ተጠቃሚው የሚያየው ገፅ ለማታየት የሚያስፈልገው ትርጉም እኛ እንዳለን ነው።

የሰርቨር በኩል ማቅረብ ለማቋቋም፣ /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 ምርመራን ለእርስዎ የሚስማማ እንዲሆን ያስተካክሉ። If true, TacoTranslate የህዝብ API ቁልፍን ይታያል። ካለን በlocal, test, ወይም 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);
}

እባክዎ በ Next.js Middleware ሰነድ መሠረት matcher እንዲተካ ያረጋግጡ።

በክላይንት ላይ፣ የተጠቃሚው የተፈለገውን ቋንቋ ለማስተካከል locale cookie መቀየር ይችላሉ። እባክዎን ይህንን እንዴት እንደሚደረግ ለምሳሌ ኮድ ለማየት የተጠናቀቀውን ምሳሌ ኮድ ይመልከቱ።

ደረጃ 5: አስተላለፉ እና ይፈትኑ!

እንግዲህ ተጠናቀቀ! ለማንኛውም ስትሪንግ ወደ Translate ኮምፖነንት ሲጨምሩ፣ የReact መተግበሪያዎ አሁን በራሱ ይተረጉማል። እባኮትን ያስታውሱ፣ በAPI ቁልፉ ላይ read/write ፈቃድ ያላቸው አካባቢዎች ብቻ አዲስ ስትሪንግ ለመፍጠር ይችላሉ። እኛ እንመክራለን የሚያስፈልገውን በመሞከር ከኮድዎ ቀደም አዲስ ስትሪንግ ማከማቻ ማድረግ የሚቻለውን የ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!