Next.js ላይ የሚጠቀሙትን App Router በመጠቀም የዓለም አቀፍ አስተካክል (internationalization) እንዴት መፈፀም እንደሚቻል

ዓለም በቀጥታ ሲነፃፀር የድር አቀፍ አካውንት ሰራተኞች ለተለያዩ አገሮችና ባህላት የሚሰሩ መተግበሪያዎችን ለመፍጠር እንዲችሉ በጣም አስፈላጊ ነው። አንደኛው ከአማካይ መንገዶች አንዱ ለፈጣን ማህበረሰብ ውስጥ መስራት እና ተለያዩ ቋንቋዎች፣ ገንዘቦችና የቀን ቅርጾች ለመስራት ከባድ ማድረግ ነው።

በዚህ ወረዳ በReact Next.js መተግበሪያዎ ውስጥ ከአገልግሎት አገልግሎት ጋር የአለም አቀፍ አገልግሎት (i18n) እንዴት እንደሚጨምር እንደምናስተዋውቅ ነው። TL;DR: እዚህ ሙሉ ምሳሌውን ይመልከቱ።

ይህ መምሪያ ለ App Router ተጠቃሚ ያሉ የNext.js መተግበሪያዎች ነው።
ከሆነም እርስዎ Pages Router ተጠቃሚ ከሆኑ እባክዎ በዚህ መምሪያ ይመልከቱ።

ደርሰኝ 1: i18n ላይብራሪ አግኝተው አገኙ

እንደታሰረው በNext.js መተግበሪያዎ ውስጥ በአለምአቀፍ ማስተካከያ (i18n) ለማከናወን የመጀመሪያ እንምረጥ የi18n thưቤሪ ነው። በአማራጮች መካከል የተለመዱ ብዙ thưቤሪዎች አሉ፣ ከእነዚህም 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: ለማስቀመጥ የሚያስፈልገው ቦታ ወይም "ፎልደር" ፣ እንደ ድር ጣቢያዎ ዩአርኤል ይህ ይሆናል። እዚህ ስለ origins ተጨማሪ እንዲሁ ያነቡ።

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 ተብሎ የተጠራውን ፋይል ፍጠሩ፣ ይህም በመተግበሪያችን ውስጥ ራስ ላይ ያለው የlayout ፋይል ነው። እባክዎ ይህ መንገድ የሚጠቀሰው 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);
}

የ matcher በ Next.js Middleware ሰነድ መሠረት መሰረት መቅጠርን አረጋግጡ።

በክላይሜንት በ locale ኩኪ እንደ ተጠቃሚው የሚወደደው ቋንቋ ለማስተካከል ማለዳዊ ልወጥ ማድረግ ይችላሉ። እባክዎ እንዴት እንደሚደረግ ለማስተላለፍ እባክዎን በጥሩ ሙሉ አሰራር ኮድ ይመልከቱ!

ደረጃ 5፦ አቅርብ እና ፈትሽ!

እንኳን ሠርተናል! የእርስዎ የReact መተግበሪያ ከማንኛውም ትርጉም ስርአት Translate ኮምፖነንት ላይ እስራት ሲጨምሩ በራሱ እንዲተረጉም ይሆናል። በAPI ቁልፉ ላይ ብቻ ያሉ አካባቢዎች read/write ፈቃድ ከሆነ ብቻ አዲስ ስርአቶችን ለመፍጠር ይችላሉ። እኛ ምክር የምናቀርበው በዚህ የምርመራ አካባቢ ውስጥ የተዘጋጀ እና የተደረገ ደህንነት እንዲኖረው ነው፣ በዚህ አካባቢ እንደዚህ ዓይነት የAPI ቁልፍ ጋር የምርመራዎትን የምርት መተግበሪያዎትን እንዲፈተሹ እና ማነስ አዲስ ስርአቶችን ማካተት ከማድረግ በፊት ይጠበቅ። ይህ ማንኛውም ሰው የእርስዎን ምስጢራዊ የAPI ቁልፍ እንዳይበልጥ ይከላከላል፣ እና በተጨማሪም በማይጠቃሚ እና በተያያዘ ስርአቶች ማካተት የትርጉም ፕሮጀክቶዎት እንዳይጭነቅ ያስቆጥራል።

እባክህ በ GitHub ፕሮፋይልአችን ላይ ሙሉውን እተኛ እንዲመለከቱ ይረጋገጡ። በዚያ ቦታ እንዴት እንደሚሰራ በ Pages Router መጠቀም የሚደረገውን እተኛ እንደገና ያገኙ። የሚከሰቱትን ችግሮች ቢጋጥማችሁ እንደሚችሉት ይህን ገፅታ እንድትደርሱን ነን ደስታ እናሰጥዎታለን።

TacoTranslate ለእርስዎ የ React መተግበሪያዎችን በማንኛውም ቋንቋ በፍጥነት ለማደስ በራሳቸው ሊደርሰዎት ይፈቅዳል። ዛሬ መጀመር ይችላሉ!