Next.js አፕሊኬሽን ውስጥ ከPages Router ተጠቅመው የሚሰሩ የአለም አቀፍ አማራጭ እንዴት እንደሚፈፀም እንዴት እንደሚደረግ

ከዓለም በቀጥታ እየተናወረ መሆኑ ሲቀጥል፣ ለድር አተገባበሪዎች ከተለያዩ አገሮችና ባህላት ተጠቃሚዎች ሊሰሩ የሚችሉ መተግበሪያዎችን ማምረት በጣም አስፈላጊ ነው። አንዱ ከአስፈላጊዎቹ መንገዶች በመሆኑ የአለም አቀፍነት (i18n) ነው፣ ይህም መተግበሪያዎትን ወደ ተለያዩ ቋንቋዎች፣ ምንዛሬዎች እና የቀን አቀማመጦች ማስተካከል ይፈቅዳል።

በዚህ ትምህርት ክፍል ላይ፣ ለReact Next.js መተግበሪያዎ ከ server side rendering ጋር አለም አቀፍነትን እንዴት ማካተት እንደምንማርከው እናያለን። 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 ነው። ለምሳሌ፣ እነዚህን በፕሮጀክትዎ ራብ ላይ ያለው .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 የReact ማብራሪያዎችዎን በፍጥነት እና በማንኛውም ቋንቋ በተለዋዋጭ መልኩ ለማከማቸት ያስችላል። ዛሬ መጀመር ይችላሉ!