በNext.js መተግበሪያዎች ውስጥ ለአለም አቀፍ ቋንቋ አቀራረብ (i18n) ምርጥ መፍትሄ

እንዴት እንደሚሰራ

ዓለም እየተከፋፈለ መሆኑ ከፍተኛ እንደሆነ የድህረ መረብ አሰራሮች ከተለያዩ ሀገራትና ባህላት የሚመጡ ተጠቃሚዎችን የሚሠሩ መተግበሪያዎችን መሰራት አስፈላጊ ነው። ከነዚህ አንዱ ቁልፍ መንገዶች በአለም አቀፍ ቋንቋ አስተዳደር (i18n) ነው፣ ይህም መተግበሪያዎትን እንዲለዋወጡ ለበለይ ቋንቋዎች፣ ምንዛሪያዎችና የቀን ቅርጸቶች እንዲሰተኑ ይፈቅዳል።

በዚህ መምሪያ ውስጥ ደግሞ ለReact Next.js መተግበሪያዎ በሰርቨር ክፍል እንዴት አለም አቀፍ ቋንቋ እንደሚያካትቱ እንመለከታለን። TL;DR: እዚህ ሙሉ እትም ይመልከቱ።

ይህ መመሪያ ለNext.js ማብራሪያዎች ነው እና እነሱ Pages Router እንደሚጠቀሙበት።
የእርስዎ ከ App Router በመጠቀም ከሆነ፣ እባክዎን ይህን መመሪያ ተመልከቱ።

ደረጃ 1: አንድ i18n ቤተ-መፃህፍት አስገባ

የእርስዎን Next.js መተግበሪያ በዓለም አቀፍ ማስተካከያ ለማካሄድ፣ መጀመሪያ አንድ የi18n thưረብሪ እንምረጥ። ብዙ የተለመዱ thưረብሪዎች አሉ፣ ከነዚህም next-intl አንዱ ነው። ነገር ግን፣ በዚህ ምሳሌ ደግሞ TacoTranslate እንጠቀማለን።

TacoTranslate በልዩ ዘመናዊ AI መንገድ በማስተላለፊያዎች ላይ በማንኛውም ቋንቋ ራስሰር ትርጉም ያደርጋል እና የJSON ፋይሎችን አጥብቆ ማስተዳደር ከእርስዎ ይልቁት ይሰረዝልዎታል።

በተርኔልዎ ውስጥ በ npm ለማግኘት እንጀምር።

npm install tacotranslate

ደረጃ 2፥ ነጻ ያለው የTacoTranslate መለያ ይፍጠሩ

አሁን ሞጁሉን ከደረሰህ በኋላ፣ የታኮትራንስሌት መለያህን፣ የትርጉም ፕሮጀክት እና የተያያዙ የAPI ቁልፎችን መፍጠር ጊዜው መሆነ ነው። እዚህ መለያ መፍጠር። ከፍያ ነው፣ እና ክሬዲት ካርድ መጨመር አያስፈልግህም።

በTacoTranslate መተግበሪያ UI ውስጥ፣ አንድ ፕሮጀክት ይፍጠሩ እና ወደ ኤፒአይ ቁልፎቹ ትልቅ መሰረዝ ይሂዱ። አንድ 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 እንዴት እንደሚዘጋጅ ማቀናበር

ታኮTranslate ከመተግበሪያዎ ጋር ለማዋሃድ, ቀደም ሲል የ ኤፒአይ ቁልፎችን በመጠቀም ደንበኛ መፍጠር ያስፈልግዎታል. ለምሳሌ, /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 ኮምፓውነንት ሲያክሉ በራስ-ነጻ እንዲተረጉም ይሆናል። እባክዎትን ማስታወሻ ስለሆነ፣ በread/write ፈቃድ ያላቸው አካባቢዎች ብቻ አዲስ ሐረጎችን እንዲፈጥሩ ይችላሉ። እኛ የምንመከርላችሁ ደረጃ ያለውና የተደረገ ተዘጋጅቷ ያለ ማስፈንጠሪያ አካባቢ ማስተናገድ ነው፣ ስለዚህ ከስራ አስኪያጅ መተግበሪያዎ ጋር እንደዚህ ያለ የAPI ቁልፍ በመጠቀም መፈተን እና አዲስ ሐረጎችን በማክለብ በፊት ለመኖር ይችላሉ። ይህ እርስዎ የሚያሰር የAPI ቁልፍዎን ማንኛውንም ሰው ከማጥፋት እና በተጨማሪም በመተርጎም ፕሮጀክትዎ አያያዝ ላይ አዲስ እንዳያስገቡ እንደሚታወቀው ጥንካሬ ይሰጣል።

እባክህ በGitHub መለያችን ላይ ሙሉውን እባብ ምሳሌ ተመልከት። እዚህ ደግሞ በApp Router መጠቀም እንዴት እንደሚቻል ምሳሌ ትገኛለህ! ማንኛውንም ችግር ቢኖርህ፣ እባክህ እንደገና ያግኙን፣ እኛም በሙሉ እንደምንረዳ ደስ ይለናል።

TacoTranslate ራስሰር በማድረግ የReact ማብቂያዎችን በፍጥነት ወደ ማንኛውም ቋንቋ እና ከእሱ ያቀርባል። ዛሬ መጀመር ይችላሉ!