በ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 ቁልፍዎን ከማንም መቆረጥ ይከልክላል እና ምናልባት በአይነት ያልተዛመደ ንጥሎችን በመጨመር የትርጉም ፕሮጀክታዎን ከፍ ከሚያደርሱ እንዳይከሰት ይረዳል።

እባክዎን በጉብኝት ላይ ያሉትን አጠቃላይ ምሳሌ ይመልከቱ በGitHub መገለጫችን። እዚህ እናንተ የ App Router እንዴት እንደሚሰራ የሚያሳይ ምሳሌ ደግሞ ታገኛላችሁ! ማንኛውንም ችግር ከተጋጠማችሁ በነፃ እንደሚገኙ እና እንደሚያግዙ ተገናኝተው፣ እኛ ደስ ብሎናል።

TacoTranslate እባኮትን በአማራጭ ቋንቋ ወደ እና ከማንኛውም ቋንቋ በፍጥነት የReact አመቻችንን ለአገልግሎት ይከፍሉ። ዛሬ መጀመር ይጀምሩ!