በNext.js መተግበሪያ ውስጥ የPages Routerን ሲጠቀም፣ እንዴት ያለውን ዓለም አቀፍ ማስተካከያ (internationalization) መፈጸም እንደሚቻል?

ዓለም እየተዋበ ሲሆን፣ ከተለያዩ አገሮችና ባህላት የሚመጡ ተጠቃሚዎችን ለማገልገል የድር አባላት መተግበሪያዎችን ማቀናበር እየጨምረ ነው። ይህን ለማሳካት ከሚጠቅሙ ቁልፍ መንገዶች አንዱ ኢንተርናሽናላይዜሽን (i18n) ነው፣ ይህም መተግበሪያዎን ወደ በርካታ ቋንቋዎች፣ ምንዛሬዎች እና የቀን ቅርጾች ለማስተካከል ይፈቅዳል።

በዚህ መምሪያ ውስጥ፣ ከሰርቨር-ክፍለ-ጊዜ ሪንደሪንግ ጋር ለReact Next.js መተግበሪያዎ ኢንተርናሽናላይዜሽን እንዴት እንደሚጨምር እንመለከታለን። TL;DR: ሙሉውን ምሳሌ እዚህ ይመልከቱ።

ይህ መመሪያ ለ Next.js መተግበሪያዎች ነው እነሱ የ Pages Router እየጠቀሙ።
የ 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 ቁልፍ ፍጠሩ። እነሱን እንደ አካባቢ ተለዋዋጮች (environment variables) እንዲቀመጡ እናደርጋለን። የread ቁልፍ የምንጠራው public ነው፣ እና የread/write ቁልፍ secret ነው። ለምሳሌ፣ እነዚህን ወደ የፕሮጀክትዎ ራስ (root) ላይ ያለ .env ፋይል ማክለብ ይችላሉ።

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

እባክዎ የምስጢራዊ read/write API ቁልፍ ወደ client-side ፕሮዳክሽን አካባቢዎች እንዳታስወግዱ ያረጋግጡ።

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

• TACOTRANSLATE_DEFAULT_LOCALE: የነባሪ የመመለስ የቋንቋ ኮድ። በዚህ ምሳሌ፣ እንግሊዝኛን ለመደገፍ 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 የትርጉሞችዎን በሰርቨር ላይ ማቅረብ ይፈቅዳል። ይህ ተጠቃሚውን ልምድ በጣም ያሻሽላል፤ ተርጉሙ ይዘቶችን ወዲያውኑ እንዲታዩ ያደርጋል እና በመጀመሪያ የማይተረጉሙ ይዘቶች የሚፈጥሩ የማሳያ ማስታወቂያ እንዳይኖር ያረጋግጣል። ተጨማሪም፣ እኛ ያስፈለገንን ሁሉንም ትርጉሞች እንዳለን ስለሆነ በክላይንት ላይ የኔትወርክ ጥያቄዎችን ማድረግ እንሻላለን።

በ /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: አቀርቡ እና ይሞክሩ!

ሥራው ተጠናቀቀ! ከአሁን ጀምሮ፣ ለTranslate ኮምፖነንት ማንኛውንም ጽሁፍ ሲጨምሩ የReact መተግበሪያዎ በራሱ ይተረጉማል። ማስታወሻ፡- በAPI ቁልፉ ላይ read/write ፈቃድ ያላቸው አካባቢዎች ብቻ አዲስ ለመተረጉ ጽሁፎችን ማፍጠር ይችላሉ። እኛ እንመክራለን እንዲሁ እንደዚህ ዓይነት የAPI ቁልፍ በሚጠቀሙበት የምርት መተግበሪያዎን ከሕይወት ለማስገባት በፊት ለማሞከር የተዘጋና የተጠናቀቀ የstaging አካባቢ እንዲኖርዎት እንመክራለን፣ እዚህ ውስጥ አዲስ ጽሁፎችን ማካተት ይችላሉ። ይህ ከማንኛውም ሰው የምስጢራዊ የAPI ቁልፍዎን ማስተናገድ ይከላከላል፣ እና አዲስ እና የተዛመዱ እንደሌሉ ጽሁፎችን በመጨመር የትርጉም ፕሮጀክትዎን እንዳይባረክ ይረዳል።

እባክዎ በGitHub ፕሮፋይላችን ላይ ያለውን ፍጹም ምሳሌውን ይመልከቱ። በዚያ እንዲሁም በApp Router እንዴት እንደሚሠራ የሚያሳየው ምሳሌ ይገኛሉ! ማንኛውንም ችግኝ ከተጋገዙ እባክዎን ያግኙን፣ ለመርዳት እጅግ ደስ ይለናል።

TacoTranslate የReact መተግበሪያዎችን በአውቶማቲክ ሁኔታ ወደ እና ከ 75 በላይ ቋንቋዎች ይተርጉማል። ዛሬ ይጀምሩ!