Next.js መተግበሪያ ውስጥ ከApp Router ተጠቃሚ ሲሆን እንዴት እንደሚፈጸም የአለም አቀፍ ቋንቋ ዝርዝር ማስገባት እንዴት እንደሚደረግ እንደሚታወቅ ነው።

እንግዲኛ ዓለም በተለያዩ አገሮችና ባህላት የሚኖሩ ተጠቃሚዎችን ሊያገኙ የሚችሉ መተግበሪያዎችን ለመገንባት ለድህረ ገጽ ሰራተኞች እየበዛ ያለ ነው። ይህን ለማሳካት ከዋና መንገዶች አንዱ በኢንተርናሽናላይዜሽን (i18n) ነው፣ ስለሚል መተግበሪያዎትን ወደ በተለያዩ ቋንቋዎች፣ ገንዘብ አይነቶችና የቀን ቅርጾች ለማስተካከል ይፈቅዳል።

በዚህ ማዕከል ውስጥ ደግሞ በReact Next.js መተግበሪያዎት ውስጥ ኢንተርናሽናላይዜሽንን እንዴት ማክለል እንደሚቻል ከሰርቨር ጎን እንዲታይ በመጠቀም እንያያለን። TL;DR: የተሟላውን ምሳሌ እዚህ ይመልከቱ።

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

ደረጃ 1: አንድ i18n ቤተ-መፅሃት ያግኙ እና ያጫኑ

የአለም አቀፍ ቋንቋ የማስፈጸሚያን (internationalization) በNext.js መተግበሪያዎ ለማከናወን, መጀመሪያ አንድ የi18n ላይብረሪ እንምረጥ። በብዙ የሚሰሙ ላይብረሪዎች ውስጥ, next-intl ያሉት አንዱ ነው። ነገር ግን, በዚህ ምሳሌ ደግሞ TacoTranslate እንጠቀማለን።

TacoTranslate በቅድሚያ የተሻለ ሰውነት ብሎች (AI) በመጠቀም የእርስዎን ጽሑፎች ወደ ማንኛውም ቋንቋ በራሱ ራሱ ይተረጉማል፣ እና ከJSON ፋይሎች እንደሚፈልጉት መንገድ አያስቸግረዎትም።

በመጨረሻ በ npm በመጠቀም በተለመዱት መሣሪያዎች ውስጥ እንጫንል።

npm install tacotranslate

Step 2: ነፃ የTacoTranslate መለያ ይፍጠሩ

አሁን ሞጁሉን ከጫነው በኋላ, ራስዎን TacoTranslate አካውንት፣ የትርጉም ፕሮጀክትና ተዛማጅ የAPI ቁልፎችን ለማፍራት ጊዜ ሆኗል። እዚህ አካውንት ይፍጠሩ። ነፃ ነው፣ እና ክሬዲት ካርድ መጨመር አያስፈልግዎትም።

በTacoTranslate መተግበሪያ የተጠቃሚ ቅርጸ-ተከታታይ ውስጥ፣ ፕሮጀክት ፍጠር እና ወደ 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 ማሰተካከያ

To integrate TacoTranslate with your application, you’ll need to create a client using the API keys from earlier. For example, create a file named /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 ተለዋዋጭ እንደሚነግሩት ነው በ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 የህዝብ ኤፒአይ ቁልፍ ላይ ይውላል. በአካባቢያዊ, ፈተና, ወይም መድረክ አካባቢ (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 ቁልፍዎን እንዳይሰረቅና ምናልባትም አዲስ ያልተገናኘ ቁምፊዎችን በመጨመር ለየነቱ ፕሮጀክት እንዳይዘጋጅ ይከላከላል።

እንደማይታሰብ በGitHub ፕሮፋይላችን ላይ ሙሉ የሆነውን እንቅስቃሴ ይመልከቱ። እዚያም ይህን በPages Router በመጠቀም እንዴት እንደሚያደርጉ እንቅስቃሴ ትገኛላችሁ! ማንኛውንም ችግር ሲያጋጥምዎት በነፃ እንደሚገኙት እንደገና ይደውሉን፣ እኛም ለማገዝ በጣም ደስ ብሎናል።

TacoTranslate በማንኛውም ቋንቋ ወደ እና ከዚያ ወደ ሚፈልጉበት ቋንቋ ያሉትን React መተግበሪያዎች በራስሰር በፍጥነት ይተከላለላል። እስከዛሬ ይጀምሩ!