Next.js መተግበሪያ ውስጥ ከ App Router ተጠቃሚ ሲሆን እንዴት ዓለም አቀፍ ማስተካከያ (internationalization) እንደሚፈፀም

እንደ ዓለም በበለጠ አለምአቀፍ መሆኑ እየተሻሻለ ሲሆን፣ ለድር አተገባበር አንዳንድ ተጠቃሚዎች ከተለያዩ አገሮችና ባህላት ሊከተሉ የሚችሉ መተግበሪያዎችን ማምረት ለድር አካላት በጣም አስፈላጊ ነው። እነዚህን ለማሳካት ከፍተኛው መንገድ አንዱ የዓለም አቀፍ ቋንቋ አቀማመጥ (i18n) ነው፣ እሱም መተግበሪያዎችዎን ወደ ተለያዩ ቋንቋዎች፣ ገንዘብ እና የቀን ቅርጸ ተከታታይ ለመስራት ይደርሳል።

በዚህ ዘገባ ውስጥ እኛ የሚሰጥ የዓለም አቀፍ ቋንቋ አቀማመጥን ለReact Next.js መተግበሪያዎችዎ እንዴት መጨመር እንቀርባለን ከserver side rendering ጋር። TL;DR: እዚህ ሙሉውን እንደነበረ ይመልከቱ።

ይህ መመሪያ ለ App Router የሚጠቀሙ በ Next.js መተግበሪያዎች ነው።
ማንኛውንም ጊዜ ከ Pages Router ተጠቃሚ ከሆኑ፣ ይህን መመሪያ ተመልከቱ።

እርምዐት 1: አንድ i18n ቤተ-መፃህፍት ያግኙ

በNext.js መተግበሪያዎ ውስጥ አለም አቀፍ ቋንቋ ያሳያል (internationalization) ለመፈፀም መጀመሪያ አንድ i18n ቤተ-መፅሐፍ እንምረጥ። ከብዙ የታዋቂ ቤተ-መፅሐፍን ውስጥ next-intl አለ። ነገር ግን በዚህ እትም ላይ እኛ TacoTranslate እንጠቀማለን።

TacoTranslate በላይኛው የAI ቴክኖሎጂ በመጠቀም እርስዎን ማስተካከያ ቃላት ወደ ማንኛውም ቋንቋ በራሱ ሚተርጐም ያደርጋል እና የJSON ፋይሎችን አስደንቀው እንቅስቃሴ ከሚያደርጉት አድርጎ ነፃዎታል።

በየterminalsዎ npm በመጠቀም እንጫን።

npm install tacotranslate

ደረጃ 2፡ ነጻ የ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፡ ቴኮትራንስሌት መዋቅር ማቅረብ

ወደ መተግበሪያዎ ለማካተት ከቀድሞ የተሰጡት የ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 ለፕሮጀክትዎ የተ activatingት ሁሉንም የቋንቋ ኮዶች በቀዳሚ ሁኔታ እንዲነበቡ እንደሚያደርግ ይረጋግጣል።

አሁን፣ የመጀመሪያውን ገፅ እንገነብብ! ስም ያለውን ፋይል /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);
}

የ matcher ቅደም ተከተል እንዲሰራ በ Next.js Middleware ሰነድ መሠረት እርግጠኛ ያደርጉ።

በክላይንት ላይ፣ የተጠቃሚው የተለመደ ቋንቋ ምን እንደሆነ ለማስተካከል የ locale ኩኪውን መቀየር ትችላለህ። እባክዎት እንዴት እንደሚደረግ ለማስተዋል የ ሙሉ ምሳሌ ኮድ ይመልከቱ!

ምዕራፍ 5፡ አቀምጥና ፈትና አድርግ!

ስራው ተጠናቆል! እርስዎ በአሁኑ ጊዜ ማንኛውንም ስርአት ወደ 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!