ለNext.js መተግበሪያዎች የአለምአቀፍ የቋንቋ መስተካከያ (i18n) ምርጥ መፍትሄ

እንዴት እንደሚሰራ

ዓለም እየተዋሀደ እየሆነ፣ ለድር ልማቶች ለተለያዩ ሀገራትና ባህላዊ ተጠቃሚዎች የሚሰሩ መተግበሪያዎችን ማቋቋም በጣም አስፈላጊ ነው። ከዚህ አንዱ ዋና መንገዶች የማሳካት ዘዴ የአለም አቀፍ ማስተካከያ (internationalization, i18n) ነው፣ ይህም መተግበሪያዎን ለተለያዩ ቋንቋዎች፣ ምንዛሪዎች እና የቀን ቅርጾች ለማቀናበር ይፈቅዳል።

በዚህ መመሪያ እኛ ከሰርቨር ወገን ማቅረብ (server side rendering) ጋር የ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 መተግበሪያ ውስጥ ፕሮጀክት ይፍጠሩ እና ወደ የAPI ቁልፎች ታብ ይሂዱ። አንድ read ቁልፍ እና አንድ read/write ቁልፍ ይፍጠሩ። እነሱን እንደ አካባቢ ተለዋዋጮች እንያደርጋለን። የ read ቁልፍ እኛ የምንጠራው public ሲሆን የ read/write ቁልፍ ደግሞ secret ነው። ለምሳሌ፣ እነዚህን ወደ ፕሮጀክትዎ ዋና (root) ውስጥ ያለ .env ፋይል ውስጥ ማስገባት ይችላሉ።

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

የሚስጥር read/write API ቁልፍን ወደ ክላይንት-ሳይድ የፕሮዳክሽን አካባቢዎች እንዳታስወግዱ ያረጋግጡ።

እንዲሁም ሌሎች ሁለት አካባቢ ተለዋዋጮችን እንጨምራለን: TACOTRANSLATE_DEFAULT_LOCALE እና TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: የነባሪ የመመለሻ (fallback) የቋንቋ ኮድ። በዚህ ምሳሌ ለእንግሊዝኛ እንደ en እንደምንሰጥ እንወስዳለን።
• TACOTRANSLATE_ORIGIN: የስትሪንጎችዎ የሚቀመጡበት “ፎልደር”፣ ለምሳሌ የድህረገፅዎ URL ይሆናል። እዚህ ስለ ምንጮች ተጨማሪ ያነቡ።

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 የትርጉሞችዎን በሰርቨር ጎን ላይ ማቅረብ ይፈቀዳል። ይህ ትርጉማዊ ይዘቶችን ወዲያውኑ ሲታዩ ስለሚያደርግ የተጠቃሚ ልምድን በጣም ያሻሽላል፤ ከዚያም መነሻ ላይ ያልተተረጉሙ ይዘቶች የፈጥነ ማሳያ (flash) እንዳይታዩ ይረዳል። ተጨማሪም፣ የሚፈለጉትን ሁሉ ትርጉሞች እንዳሉን ስለሆነ በክላየንት ላይ የኔትወርክ ጥያቄዎችን ማስፈፀም እንዳንፈልግ ይቻላል።

እንጀምራለን በ /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 ቁልፍን ያሳያል። በአካባቢያዊ፣ ሙከራ ወይም በstaging አካባቢ (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!"/>;
}

አሁን እርስዎ በ Translate ኮምፖነንት በመጠቀም በሁሉም React ኮምፖነንቶችዎ ውስጥ ያሉትን ስትሪንጎች ማተርጎም ይችላሉ።

import {Translate} from 'tacotranslate/react';

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

ደረጃ 5: አስተላልፍ እና ሙከራ አድርግ!

ስራው ተጠናቀቀ! ከእንግዲህ የNext.js መተግበሪያዎ ማንኛውንም ጽሑፍ ወደ Translate ኮምፖነንት ሲጨምሩ በራሱ ይተረጉማል። ማስታወቂያ፡ ከAPI ቁልፉ ላይ read/write ፍቃድ ያላቸው አካባቢዎች ብቻ አዲስ የሚተረጉሙ ጽሑፎችን ለመፍጠር ይችላሉ። እኛ እንመክራለን ዝጋ እና ደህንነታማ የሙከራ (staging) አካባቢ እንዲኖራችሁ፣ በዚያ ላይ የproduction መተግበሪያዎን ከ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!