እንዴት በNext.js መተግበሪያ ላይ የአለም አቀፍ ቋንቋ ድጋፍ (internationalization) እንደሚፈፀም ያሉት ሲሆን ይህ በPages Router የሚጠቀም መሆኑን ያሳያል።

ዓለም እየተባዛ ሲሄድ፣ ከተለያዩ ሀገራት እና ባህላዊ ተጠቃሚዎች ጋር መስራት የሚችሉ የድር አፕሊኬሽኖችን ለመፍጠር ለድር ልማቶች ከዚህ በላይ አስፈላጊ ነው። እንደዚህ ለማሳካት ከተፈለጉት ዋና መንገዶች አንዱ የአለም አቀፍ አስተዋፅኦ (i18n) ነው፣ ይህም አፕሊኬሽኖችዎን ወደ በተለያዩ ቋንቋዎች፣ የገንዘብ አይነቶች፣ እና የቀን ቅርጸቶች ማስተካከል ይፈቅዳል።

በዚህ መምሪያ ውስጥ፣ ወደ እርስዎ ያለው የReact Next.js አፕሊኬሽን ድር አገልግሎት አገልግሎት በመጠቀም እንዴት አለም አቀፍ አስተዋፅኦ ማካተት እንደምን እንመለከታለን። TL;DR: ከዚህ ሙሉ ምሳሌ ይመልከቱ።

ይህ እብሪት ለ Pages Router ተጠቃሚ ያሉ Next.js መተግበሪያዎች ነው።
ከሆነ እርስዎ App Router ተጠቃሚ ናቸው፣ እባክዎ በመሆኑ ይህን መመሪያ ይመልከቱ።

መተከል 1፦ የ i18n ቤተ-መረብ አግኝተው ጫኑ

በNext.js መተግበሪያዎ ውስጥ አለማለያን ለማስኬድ ከመጀመሪያ አንድ i18n ቤተ-መፃሚያ እንምረጥ። ብዙ ታዋቂ ቤተ-መፃሚያዎች አሉ፣ ከእነዚህም በኩል next-intl አሉ። ነገር ግን፣ በዚህ ምሳሌ እንደተጠቀሰው TacoTranslate እንደጠቀምን ነው።

TacoTranslate በከፍተኛ የAI ቴክኖሎጂ በመጠቀም በማንኛውም ቋንቋ የሚያስተርክብህ ሲሆን፣ ከ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 ማቋቋም

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_DEFAULT_LOCALE ?? '',
});

module.exports = tacoTranslate;

እኛ በራስሰር በቅርቡ TACOTRANSLATE_API_KEY እንደምንገምግም እናደርጋለን።

በተለየ ላይነስ ፋይል ውስጥ ክላይንቱን መፍጠር ከዚያ በኋላ ቀላል ለመጠቀም እንደሚያደርግ ያስተምራል። አሁን፣ በተጠቃሚ የ /pages/_app.tsx አጠቃቀም መጠቀም በኩል ላይ TacoTranslate አቅራቢውን እንጨምራለን።

import React from 'react';
import {type AppProps} from 'next/app';
import {type Origin, type Locale, type Localizations} from 'tacotranslate';
import TacoTranslate from 'tacotranslate/react';
import TacoTranslateHead from 'tacotranslate/next/head';
import tacoTranslate from '../tacotranslate-client';

type PageProperties = {
	origin: Origin;
	locale: Locale;
	locales: Locale[];
	localizations: Localizations;
};

export default function App({Component, pageProps}: AppProps<PageProperties>) {
	const {origin, locale, locales, localizations} = pageProps;

	return (
		<TacoTranslate
			client={tacoTranslate}
			origin={origin}
			locale={locale}
			localizations={localizations}
		>
			<TacoTranslateHead rootUrl="https://your-website.com" locales={locales} />
			<Component {...pageProps} />
		</TacoTranslate>
	);
}

ከስር ያሉትን ባህሪያት እና ኮድ በመጨመር ከዚህ በፊት ባለዎት የተለየ pageProps እና _app.tsx ካሉዎት እባክዎ መግለጫውን ያስፋፉ።

እርምጃ 4: የአገልጋይ በመካከለኛ ክፍል ማሳያ ማካሄድ

TacoTranslate የትርጉሞችዎን የአገልጋይ አገልግሎት መፍጠር እንዲፈቀድለት ያስችላል። ይህ ተጠቃሚዎች ልምድን በቅርብ ጊዜ ትርጉም ያላቸውን ይዟል በማለት ከመጀመሪያ ትርጉም ያላቸው ይዘቶች በፍጥነት እንዳይታዩ እንዲያረጋግጥ ከፍ ያለ ማሻሻያ ያደርጋል። በተጨማሪም፣ በክላይንት ላይ የኔትወርክ ጥያቄዎችን መልሰው ማስተካከል እንችላለን፣ ምክንያቱም ያስፈልገን ሁሉንም ትርጉሞች ከፍ እንደምናለን ነው።

እኛ ከ /next.config.js መፍጠር ወይም መሻሻል በመጀመር እንጀምራለን።

const withTacoTranslate = require('tacotranslate/next/config').default;
const tacoTranslateClient = require('./tacotranslate-client');

module.exports = async () => {
	const config = {};

	return withTacoTranslate(config, {
		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'),
	});
};

ከተዘጋጀልህ isProduction ቼክ ጋር በሚስማማ መንገድ ማስተካከያ አድርግ። trueከሆነ TacoTranslate የህዝብ ኤፒአይ ቁልፍ ላይ ይውላል. በአካባቢያዊ, ፈተና, ወይም መድረክ አካባቢ (isProduction is false) ውስጥ ከሆንን, ለትርጉም አዳዲስ አውታረ መረቦች እንዲላኩ ለማድረግ ሚስጥራዊውን read/write API ቁልፍ እንጠቀማለን.

እስከ አሁን ድረስ Next.js መተግበሪያውን በድጋፍ ቋንቋዎች ዝርዝር ብቻ ነው ያዘጋጀነው። ቀጥሎ የምናደርገዉ ነገር ለሁሉም ገፆችዎ ትርጉሞችን ማምጣት ነዉ። ይህን ለማድረግ በፈለግኸው መሠረት getTacoTranslateStaticProps ወይም getTacoTranslateServerSideProps ትጠቀማለህ።

እነዚህ ተግባራት ሦስት የመከራከሪያ ነጥቦችን ይወስዳሉ አንድ Next.js Static Props Context ነገር, ቅንብር ለ TacoTranslate, እና ተመራጭ Next.js ባህሪያት. getTacoTranslateStaticProps ላይ revalidate በቅድሚያ ወደ 60 እንደሚደረጉ ልብ በሉ፤ ይህም ትርጉማችሁ ወቅታዊ ሆኖ እንዲቀጥል ነው።

ሁለቱንም ተግባራት በገጽ ለመጠቀም እንደ /pages/hello-world.tsxያለ የገጽ ፋይል እንዳለዎት እናስብ .

import {Translate} from 'tacotranslate/react';
import getTacoTranslateStaticProps from 'tacotranslate/next/get-static-props';
import tacoTranslateClient from '../tacotranslate-client';

export async function getStaticProps(context) {
	return getTacoTranslateStaticProps(context, {client: tacoTranslateClient});
}

export default function Page() {
	return <Translate string="Hello, world!"/>;
}

አሁን የሚችሉት በሁሉም የReact ኮምፖነንቶችዎ ውስጥ የሚገኙ ህልውናዎችን ለመተርጎም Translate ኮምፖነንቱን መጠቀም ነው።

import {Translate} from 'tacotranslate/react';

function Component() {
	return <Translate string="Hello, world!"/>
}

ደረጃ 5፡ አገልግሎት አቅርብ እና ይፈትኑ!

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

ሙሉውን እባክዎን በእኛ በGitHub ፕሮፋይል ላይ ያለውን ሙሉ እትም ይመልከቱ። እዚያ በApp Router በመጠቀም እንዴት እንደሚደረግ የሚያሳይ እትም ደግሞ ያገኙታል! ከሆነ ማንኛውም ችግር ቢኖርዎት፣ እባክዎን በነፃ ያግኙን, እኛም በጣም ደስ ብሎናል ለማግኘት እንረዳለን።

TacoTranslate የReact መተግበሪያዎን በሚፈልጉት ቋንቋ በራስሰር በፍጥነት ለማገናኘት ያስችላል። ዛሬ ተጀምሩ!