Next.js አፕሊኬሽን ውስጥ እንዴት አለም አቀፍ ቋንቋ ያለውን ስርዓት (internationalization) ማስፈጸም እንደሚቻል በ Pages Router ተጠቃሚ ሲሆን

ዓለም በቀጥታ ሲያለቅ ለድር አብራሪዎች ከተለያዩ ሀገራትና ባህላዊ ተጠቃሚዎች ለመስተናገድ ሊችሉ ያሉ መተግበሪያዎችን መገንባት በፍጥነት አስፈላጊ እያለ ነው። እነዚህን ለማሳካት ከሚከተለው አንዱ ዋና መንገዶች በአለም አቀፍ ማስተዋወቅ (i18n) ነው፣ ይህም መተግበሪያዎን ወደ ተለያዩ ቋንቋዎች፣ ገንዘቦች እና የቀን ቅርጾች ለማስተካከል ይፍቅርዎታል።

በዚህ ትምህርት ሂደት ውስጥ እኛ ወደ እርስዎ የReact Next.js መተግበሪያ ከserber side rendering ጋር እንዴት አለም አቀፍ ማስተዋወቅ ማክሰኞ እንማራለን። 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 መለያ ፍጠር

አሁን ሞዱሉን ከጫንህ በኋላ፣ የአካውንትህን ፣ የትርጉም ፕሮጀክትህን እና ተያያዥ የAPI ቁልፎችህን ለመፍጠር ጊዜ ነው። እዚህ አካውንት ፍጠር። ነፃ ነው፣ እና ክሬዲት ካርድ ማካተት አያስፈልግህም።

በTacoTranslate መተግበሪያ የተጠቃሚ ገጽ (UI) ውስጥ፣ ፕሮጀክት ፍጠር፣ እና ወደ API ቁልፎቹ ትርጉም ትሄድ። አንድ 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 ለትርጉሞችዎ የ server side አቀራረብ ያስችላል። ይህ ተጠቃሚዎችን በበጣም ያሻሽላል በመሆኑም ተርጓሚ ያልሆነ ይዘት በመጀመሪያ ከተለዋዋጭ እንዳይታይ በፍጥነት ተተርጎሞ ይሳያል። ተጨማሪም፣ በክላይንት ላይ የኔትወርክ ጥያቄዎችን ማስረጃ ማድረግ እንችላለን፣ ምክንያቱም እኛ እንደ አሁን ያስፈልገን ሁሉንም ትርጉሞች አለን።

እኛ በመጀመሪያ /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 የህዝብ ኤፒአይ ቁልፍ ላይ ይውላል. በአካባቢያዊ, ፈተና, ወይም መድረክ አካባቢ (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!"/>;
}

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

import {Translate} from 'tacotranslate/react';

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

መሥሪያ 5፦ አገልግሎት ላይ ማስተላለፍ እና ሙከራ ማድረግ!

ሥራችን ተጠናቀቀ! ማንኛውንም የተለያዩ ሐረጎችን በTranslate ክፍል ሲጨምሩ የReact መተግበሪያዎ አሁን በራስሰር ተተርጎሞ ይታያል። ማስታወሻ፣ በAPI ቁልፍ ላይ read/write ፈቃድ ያላቸው አካባቢዎች ብቻ አዲስ ሐረግ ሊፈጥሩ ይችላሉ። እኛ ከፍተኛ ደህንነትና ዝግጅት ያለው የሙከራ አካባቢ ማቆምን እንመክራለን እንዲህ ያለ የAPI ቁልፍ በመጠቀም የምርት መተግበሪያዎን እንዲፈትሹ እና ከህዋሳዊ ማለት ቀደም ላይ አዲስ ሐረጎችን ስትጨምሩ። ይህ የእርስዎን ምስጢራዊ የAPI ቁልፍ ከማንኛውም ሰው መጠበቅን ይከላከላል፣ እና ከአዲስና ያልተዛመዱ ሐረጎች በመጨመር የትርጉም ፕሮጀክትዎን ከፍ እንዳይሆን ይረዳል።

እባክዎን በGitHub ፕሮፋይላችን ላይ ሙሉውን አሳሽ ምሳሌ ይመልከቱ። በዚያ እንዴት እንደሚደረግ የሚያሳየውን ምሳሌ በApp Router በመጠቀም እንደሚሆን ታገኙታላችሁ! ማንኛውንም ችግር ከጋጋር ከሆነ እባክዎን አግኙን፥ እኛም በሙሉ ደስ ብሎናል ለእርዳታ እንዝጋለን።

TacoTranslate እንደ ራስጌ ያሉ መተግበሪያዎችዎን በፍጥነት ለከፍተኛዎቹ 75 ቋንቋዎች ውስጥ እና ውጭ በማስተካከል እንዲሄዱ ይፈቅዳል። ዛሬ ይጀምሩ!