በNext.js መተግበሪያዎች ላይ ለአለም አቀፍ ቋንቋ ማስተካከያ (i18n) በጣም የተሻለ መፍትሔ

እንዴት እንደሚሰራ

ከዓለም የተለዋዋጭ መሆን ጋር በተያያዘ የድር አካላት ለተለያዩ አገሮችና ባህላት ተጠቃሚዎች ሊሰጡ የሚችሉ መተግበሪያዎችን መገንባት በጣም አስፈላጊ እንደሆነ በተጨማሪ በሚተካው ዓለም ላይ ተገንቢዎች ያለማስተካከል አይቻልም። ከነዚህ መካከል አንዱ እንደ ትክክል መደረጊያ (i18n) ማለት ዓለም አቀፍ ማስተካከያ ይችላሉ፣ ይህም መተግበሪያዎን ወደ ተለያዩ ቋንቋዎች፣ ምንዛሬዎችና የቀን ቅርጾች ማስተካከል ይፈቅዳል።

በዚህ መምሪያ ውስጥ፣ የReact Next.js መተግበሪያዎ ላይ ከሰርቨር በኩል ማቅረብ ጋር እንዴት እንደሚያስተካክሉ መማር እንቀጥላለን። TL;DR: እዚህ ሙሉ ምሳሌውን ይመልከቱ።

ይህ መመሪያ ለ Pages Router እየተጠቀሙ ያሉ በ Next.js መተግበሪያዎች ነው።
ከሆነ እርስዎ App Router ተጠቀሙ እንደሆነ፣ እባክዎ መመሪያውን በተቀጥለው ይመልከቱ።

መሠረታዊ ክፍል 1፡ i18n ቤተ-መፅሀፍ አገኙ

በ Next.js መተግበሪያዎ ውስጥ የአለም አቀፍነት (i18n) ለማካሄድ በመጀመሪያ የ i18n ቤተ-መፃሚያ እንምረጥ። የተለመዱ ብዙ ቤተ-መፃሚያዎች አሉ፣ ከእነዚህም next-intl ያሉት አንዱ ነው። ነገር ግን በዚህ እትም ውስጥ እንግዲኛ TacoTranslate እንጠቀማለን።

TacoTranslate በሚያስደንቅ የአእምሮ ሰው ሰርጥ (AI) በኩል ትርጉሞችን ለማንኛውም ቋንቋ በማከናወን ለእርስዎ ቃላትን በራሱ ያተርጎማል፣ እና ከ JSON ፋይሎች አስቸጋሪ አስተዳደር ይወግዳል።

በ npm ግቤት ላይ ለመጫን እንሂድ፦

npm install tacotranslate

Step 2: ነፃ የTacoTranslate አካውንት ፍጠር

አሁን ሞጁሉን ከጫንህ በኋላ፣ የእርስዎን TacoTranslate መለያ፣ ትርጉም ፕሮጀክትና ተያያዥ የAPI ቁልፎች ለመፍጠር ጊዜ ተደርጓል። እዚህ መለያ ፍጠር። ነጻ ነው፣ እና የክሬዲት ካርድ ማካተትን አያስፈልግህም።

በTacoTranslate መተግበሪያ በተጠቃሚ ባለሞያ በገጽታው ውስጥ፣ ፕሮጀክት ፍጠር፣ እና ወደ ኤፒአይ ቁልፎች ትር ይጓዙ። አንድ 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 መዋቅር ማቋቋም

TacoTranslateን ከማመቻቸት ጋር ለማያያዝ ከዚህ በፊት ከ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_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 ህዝብ የሆነውን API ቁልፍ ያሳያል። በአካባቢ, ሙከራ ወይም ማዶ አካባቢ (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፡ አቀምጥ እና ሞክር!

እንኳን ተጠናቀቀ! የNext.js ተግባርዎ ከሆነ በ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 App 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!