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

እንዴት ይሰራል

ዓለም እየተለዋዋጨ ሲሆን፣ ለተለያዩ ሀገሮችና ባህላዊ ተጠቃሚዎች የሚመለከት መተግበሪያ ለማስተካከል ለድር ኃይለኞች እየገናኘ አስፈላጊ ነው። ይህንን ለማግኘት ከዋና መንገዶች አንዱ የአለማቀድ (internationalization, i18n) ነው፣ ይህም መተግበሪያዎን ወደ ተለያዩ ቋንቋዎች፣ ገንዘብ አይነቶችና የቀን ቅርጾች ለማስተካከል ይፈቅዳል።

በዚህ መመሪያ፣ ከሰርቨር ጎን ዳሰሳ (server side rendering) ጋር ለReact Next.js መተግበሪያዎ የአለማቀድ (i18n) እንዴት ማስገባት እንማራለን። TL;DR: ሙሉውን ምሳሌ እዚህ ይመልከቱ።

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

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

የNext.js መተግበሪያዎን ለቋንቋ አስተስረያ (internationalization) ለማስፈፀም፣ በመጀመሪያ አንድ i18n ቤተ-መዝገብ እንምረጥ። ብዙ የተለመዱ ቤተ-መዝገቦች አሉ፣ ከሚካተቱትም next-intl. ነገር ግን፣ በዚህ ምሳሌ ውስጥ TacoTranslate እንጠቀማለን።

TacoTranslate በዘመናዊ የAI ቴክኖሎጂ በመጠቀም የጽሑፎችዎን ሕረጎች ወደ ማንኛውም ቋንቋ በራሱ ይተርጉማል፣ እና የJSON ፋይሎችን የሚጨገርም የአስተዳደር ሥራ ልክ ከእርስዎ ይወግዳል።

በተርሚናልዎ npm በመጠቀም እንጫኑ:

npm install tacotranslate

ደረጃ 2: ነፃ የTacoTranslate መለያ ይፍጠሩ

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

የTacoTranslate መተግበሪያ UI ውስጥ ፕሮጀክት ይፍጠሩ እና ወደ የ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: ነባሪ የተመላሽ ቋንቋ ኮድ። በዚህ ምሳሌ ወደ 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 ባህሪያት። ማስታወሻ፡ 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 ፈቃድ ያላቸው አካባቢዎች ብቻ አዲስ ለመተረጉም ጽሁፎችን ሊፈጥሩ ይችላሉ። እኛ እንመክራለን የሚፈለገውን የproduction መተግበሪያዎን በእንዲሁ ያለ API ቁልፍ ለማሞከር እና ከህዋ ላይ ለማለፍ በፊት አዲስ ጽሁፎችን ማስገባት ይችላችሁ የሚሆን የተዘጋና የደህንነት የstaging አካባቢ እንዲኖርዎ እንመክራለን። ይህ የምስጢራዊ የ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!