የNext.js መተግበሪያ ውስጥ የPages Router ተጠቃሚ የሆነ ዓለም አቀፍ እናቀርባለን እንዴት እንሰራለን?

ዓለም እየተባለቀ ስለሆነ ለድር አፕሊኬሽኖች አንደኛ በሆነ መልኩ ከተለያዩ ሀገራትና ባህላዊ ተጠቃሚዎች ለማገልገል ማቅረብ እጅግ አስፈላጊ ነው። ይህን ለማሳካት ከአንደኛዎቹ ቀላል መንገዶች አንዱ በአለም አቀፍ ቋንቋ ተለዋዋጭነት (i18n) ነው፣ እንዲሁም አፕሊኬሽኑን ወደ ተለያዩ ቋንቋዎች፣ ገንዘብ ስርዓቶች እና የቀን ቅርጾች ማስተካከል ያስችላል።

በዚህ መምሪያ ውስጥ ለReact Next.js አፕሊኬሽንዎ ከserver side rendering ጋር እንዴት አለም አቀፍ ቋንቋ ተለዋዋጭነት ማስገባት እንማራለን። 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 መተግበሪያ ዩአይ ውስጥ፣ ፕሮጀክት ይፍጠሩ እና ወደ ኤፒአይ ቁልፎቹ ትርታ ይጓዙ። አንድ 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 ለትርጉሞችዎ የአገልጋይ ዳሰሳ አሳይ ማድረግ ይፈቅዳል። ይህም ተጠቃሚዎችን በቅርብ ጊዜ ተርጉሞ ያለውን ይዟቸዋል በማለት የማያተርጉሙ ይዘት በመግለጥ ያለውን እንደ ፍላሽ መሆኑን ከፍ እያሻሻለ የተሻለ ተጠቃሚ ልምድ ይሰጣል። ተጨማሪም፣ በክሊየንት ላይ የኔትወርክ ጥያቄዎችን ልክ ማቋረጥ እንችላለን፤ ምክንያቱም አሁን ያስፈልጋችንን ሁሉንም ትርጉሞች አለን።

እኛ ከ /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 ባህሪያት። እባክዎን ተዛማጅ እንደሆነ ያለ እና 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 ቁልፍ ጋር ያስተዋውቁትን በተመለከተ እንመክርላችኋለን፣ ከመኖር በፊት አዲስ ጽሑፎችን በመጨመር። ይህ ማንኛውም ሰው የሚሰሩትን የAPI ቁልፍዎን እንዳይሰርቅ እና ሌሎች ሳይገባ አዲስ ጽሑፎችን በመጨመር የትርጉም ፕሮጀክትዎን እንዳያብዛ ይከላከላል።

እባክዎ በእኛ በGitHub ፕሮፋይል ላይ ፍጹም አብራሪ እንቁም እባክዎን ይመልከቱ። ከዚያ በላይም እንዴት ያህል የሚሰራውን በApp Router ተጠቃሚ አካል ያገኙታል! ማንኛውም ችግር ከተጋጠሙ በነፃ እንደተገናኙ ያሳውቁን፣ እኛም በእናንተ ለመርዳት በጣም ደስ ይለናል።

TacoTranslate እጅግ ፈጣን በሆነ ሁኔታ ከ75 በላይ ቋንቋዎች ወደ ማንኛውም ቋንቋ በራስሰር የሚተርጎሙ የReact መተግበሪያዎችን እንዲአካባበሩልዎ ያስችላል። ዛሬ መጀመር ይችላሉ!