እንዴት በ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 የቅርጸ ቃላቶችህን በቅርብ ዘመናዊ 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 ቁልፍን ወደ ደንበኛ ክፍል የሚሰሩ ምርት አካባቢዎች ማንሳት አትርሱ።

እንዲሁም ሁለት ተጨማሪ የአካባቢ ተለዋዋጮችን እናደርጋለን፡፡ 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'; የሚገልጽው ይህ ክፍል የክላየንት ኮምፖነንት እንደሆነ ያሳያል እንዲህ ያለውን ማስታወሻ ተመልከቱ።

ከአሁን በፊት የእውቀት አቅራቢው ከተዘጋጀ በኋላ፣ በድርጅታችን ውስጥ ዋና የlayout ስፍራ የሆነውን ፋይል /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);
}

እባክዎ እንደ Next.js Middleware ሰነድ ያለው ሁኔታ matcher እንዲተካ ያረጋግጡ።

በመኪና በደርሶ ላይ, የተጠቃሚው እንደሚፈልገው ቋንቋ ለማስተካከል ሊለዋዋጭ የሚችለው locale ኩኪ ነው። እባክዎ የሙሉውን አሰራር ኮድ ይመልከቱ ለዚህ እንዴት እንደሚደረግ ሃሳቦች ለማግኘት!

ደረጃ 5: አቅራብ እና ፈተና አድርግ!

ስራችን ተጠናቀቀ! የእርስዎ Translate ኮምፖነንት ውስጥ ሲማሩ ማንኛውም ሐረግ በራሱ በተለዋዋጭ እንደተርጉሙ ይሆናል። እባክዎን ያስቡ ከ read/write ፈቃድ ጋር ያሉት አካባቢዎች ብቻ አዲስ ሐረጎችን ለመፍጠር እንደሚችሉ በAPI ቁልፉ ላይ ይቻላል። እኛ በመዘጋትና በደህንነት የተሸፈነ የማስተናገድ አካባቢ እንዲኖርዎ እንመክራለን፤ በዚህ ያሉ አይፒ ቁልፎች ጋር ማስተናገድ መተግበርያዎን ከመከላከል በፊት አዲስ ሐረጎችን እንዲጨምሩ መፈተን ይችላሉ። ይህም ማንኛውንም ሰው የሚሰይሙትን ምስጢራዊ አይፒ ቁልፍዎን ማስረጃውነቱንና እንደገና ያልተያያዙ አዲስ ሐረጎችን በመጨመር የትርጉም ፕሮጀክትዎን ሊያከፋፍሉ እንዳይፈቀድ ይከላከላል።

እባክህ በጥሩ ሁኔታ ያለውን ሙሉ እተያየት ከGitHub ፕሮፋይላችን ተመልከት። እዚህ ላይ፣ በ Pages Router በመጠቀም ያለውን እተያየት ደግሞ አግኝተዋል! ማንኛውንም ችግር ቢኖርህ እባክህ አግኙን እና ለማገዝ በጣም ደስ ይለናል።

TacoTranslate ለReact መተግበሪያዎችህ በማንኛውም ቋንቋ በፍጥነትና በራስሰር ቦታ አድርጎ ማስተካከል ይፈቅዳል። ዛሬ መጀመር ይችላሉ!