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

እንዴት ይሰራል

ዓለም ሲያለዋወጥ እየፈጠረ ሲሆን፣ ለድር ሰራተኞች ለተለያዩ አገሮችና ባህላት የሚሰሩ ተጠቃሚዎችን ሊያገለግሉ የሚችሉ መተግበሪያዎችን ማቋቋም በጣም አስፈላጊ ሆኗል። ይህንን ለማሳካት ከዋናዎቹ መንገዶች አንዱ ዓለም አቀፍ መለዋወጥ (internationalization, i18n) ነው፣ ይህም መተግበሪያዎን ወደ ተለያዩ ቋንቋዎች፣ ገንዘብ ልዩነቶችና የቀን ቅርጾች ለማስተካከል ይፈቅዳል።

በዚህ መምሪያ እንራዳዋለን እንዴት እንደሚጨምር ዓለም አቀፍ መለዋወጥ ወደ የReact Next.js መተግበሪያዎ ከሰርቨር የሚደረገ ማቅረብ ጋር። TL;DR: ሙሉውን ምሳሌ እዚህ ይመልከቱ።

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

እርምጃ 1: i18n ላይብራሪ ያጫኑ

በNext.js መተግበሪያዎ ውስጥ የinternationalization (i18n) ስርአት ለማስፈፀም መጀመሪያ የi18n ላይብራሪ እንምረጥ። ብዙ የታዋቂ ላይብራሪዎች አሉ, ከነዚህም next-intl አንዱ ነው። ነገር ግን, በዚህ ምሳሌ TacoTranslate እንጠቀማለን።

TacoTranslate በዘመናዊ የAI ቴክኖሎጂ በመጠቀም የእርስዎን ስትሪንግስ ወደ ማንኛውም ቋንቋ በአውቶማቲክ ይተርጉማል፤ እና ከJSON ፋይሎች የሚከተለውን የጫናና የአስተዳደር ጭነት ከእርስዎ ይወግዳል።

እንሂድ በተርሚናልዎ npm በመጠቀም እንጫንያለን:

npm install tacotranslate

ደረጃ 2: ነፃ የTacoTranslate አካውንት ይፍጠሩ

አሁን ሞጁሉን ካጫኑ፣ የTacoTranslate መለያዎን፣ የትርጉም ፕሮጀክትን፣ እና ተያያዥ የAPI ቁልፎችን ለመፍጠር ጊዜው ነው። እዚህ መለያ ይፍጠሩ። ነፃ ነው፣ እና የክሬዲት ካርድ መጨመር አያስፈልግም።

በTacoTranslate መተግበሪያ የUI ውስጥ፣ ፕሮጀክት ፍጠሩ እና ወደ የAPI ቁልፍ ታብ ይሂዱ። አንድ read ቁልፍ እና አንድ read/write ቁልፍ ፍጠሩ። እነሱን እንደ አካባቢ ተለዋዋጮች (environment variables) እንያደርጋለን። የ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) የlocale ኮድ። በዚህ ምሳሌ ለእንግሊዝኛ ወደ en እንቀመጣለን።
• TACOTRANSLATE_ORIGIN: የሚያስቀምጡበት “folder”፣ ለምሳሌ የድህረገፅዎ ዩአርኤል (URL) ይሆናል። ስለ origins ተጨማሪ ያንብቡ።

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 የህዝብ (public) የAPI ቁልፍን ያሳያል። ካለን በአካባቢያዊ (local), ሙከራ (test), ወይም ማዘጋጀት (staging) አካባቢ (isProduction is false)፣ አዲስ ሐረጎች ለትርጉም እንዲልኩ ምስጢራዊ read/write የAPI ቁልፍን እንጠቀማለን።

እስካሁን ድረስ፣ በNext.js መተግበሪያዎ የድጋፍ ቋንቋዎች ዝርዝርን ብቻ እንኳን አቀረብን። ቀጣዩ ነገር ለሁሉም ገፆችዎ ትርጉሞችን ማግኘት ነው። ለዚህ እርምጃ፣ መስፈርቶችዎን በመሠረት እርስዎ getTacoTranslateStaticProps ወይም getTacoTranslateServerSideProps ይጠቀሙ።

እነዚህ ፋንክሽኖች ሶስት ፓራሜተሮችን ይቀበላሉ: አንዱ Next.js Static Props Context ኦቤጅክት፣ TacoTranslate ለማቅደብ የሚሆን ቅኝት፣ እና አማራጭ Next.js ባህሪዎች። ያስታውሱ፣ revalidate በ getTacoTranslateStaticProps ላይ በነባር ወደ 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: አቅርቡ እና ይፈተኑ!

ስራው ተጠናቋል! ከእርስዎ ወደ Translate ኮምፖነንት ማንኛውንም ሐረግ ሲጨምሩ፣ የNext.js መተግበሪያዎ አሁን በራሱ ይተረጉማል። እዚህ ያስታውሱ፣ ከ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!