Next.js አፕሊኬሽን ውስጥ በApp Router ተጠቅመው የሚያካሂዱትን ዓለም አቀፍ ቋንቋ ድጋፍ (internationalization) እንዴት እንደሚፈፀም

እንደ ዓለም በተደጋጋሚ በመአቀፍ ሲሆን፣ ለድር አባላት ያሉበትን ከሚለያዩ አገሮችና ባህሎች ለማገልገል መቻል አስፈላጊ እንደሆነ ይገልጻል። ይህን ለማሳካት ከተቀባይነት ቀደም የሚሰጥ መንገድ ከአንዱ በጣም አስፈላጊ የሆነው ኢንተርናሽናላይዜሽን (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 ውስጥ ፕሮጀክት ፍጠር፥ ወደ ኤፒአይ ቁልፎች ትርፍ ይሂዱ። አንድ 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 መዋቅር ማዘጋጀት

ከቀደም ያሉትን API ቁልፎች በመጠቀም ተጠቃሚ ለመፍጠር በመተግበሪያዎ ጋር TacoTranslate ለመያዝ ደንበኛ መፍጠር ያስፈልጋል። ለምሳሌ፣ /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 ተለዋዋጭውን ያስቡ። ይህ በ60 ሰከንዶች በኋላ Next.js ያገነባውን ገጽ ማደግ እና ትርጉሞችዎን እየተዘምነ እንዲኖሩ ይነግራል።

ደረጃ 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፡ አቀምጥ እና ሙከራ አድርግ!

እኛ ተጠናቀቅናል! ሲሆን የReact መተግበሪያዎ አሁን ማንኛውንም ህሳብ ወደ Translate ክፍል ሲጨምሩ በራስን ተተርጎሞ ይቀርባል። እንደምታውቁ በ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!