Pages Router ഉപയോഗിക്കുന്ന ഒരു Next.js ആപ്ലിക്കേഷനിൽ ഇന്റർനാഷണലൈസേഷൻ എങ്ങനെ നടപ്പിലാക്കാമെന്ന്

ലോകം കൂടുതൽ ആഗോളവൽക്കൃതമാകുമ്പോൾ, വിവിധ രാജ്യങ്ങളിലും സംസ്കാരങ്ങളിലും നിന്നുള്ള ഉപയോക്താക്കളെ കൂടെ എടുത്ത് ഓർമിപ്പിക്കുന്ന ആപ്ലിക്കേഷനുകൾ വെബ് ഡെവലപ്പർമാർ നിർമ്മിക്കുന്നതിനുള്ള പ്രാധാന്യം വർധിച്ചുകൊണ്ടിരിക്കുന്നു. ഇത്എ saavutിക്കാൻ ഏറ്റവും പ്രധാനപ്പെട്ട മാർഗങ്ങളിൽ ഒന്നാണ് അന്തർദേശീയവൽക്കരണം (i18n), ഇത് നിങ്ങളുടെ ആപ്ലിക്കേഷൻ വ്യത്യസ്ത ഭാഷകൾ, കറൻസികൾ, തീയതി ഫോർമാറ്റുകൾ എന്നിവയിലേക്ക് അനുയോജ്യമായി മാറ്റാൻ അനുവദിക്കുന്നു.

ഈ ട്യൂട്ടോറിയലിൽ, ഞങ്ങൾ നിങ്ങളുടെ React Next.js ആപ്ലിക്കേഷനിൽ സെർവർ സൈഡ് റെൻഡറിംഗ് ഉപയോഗിച്ച് അന്തർദേശീയവൽക്കരണം എങ്ങനെ ചേർക്കാമെന്ന് പരിശോധിക്കും. 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 അക്കൗണ്ട് സൃഷ്‌ടിക്കുക

ഇപ്പോൾ നിങ്ങൾ മോർഡ്യൂൾ ഇൻസ്റ്റാൾ ചെയ്‌ത ഉള്ളതിനാൽ, നിങ്ങളുടെ 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 കീയെ ക്ലയന്റ് സൈഡ് പ്രൊഡക്ഷൻ പരിതസ്ഥിതികളിലേക്ക് ഒരിക്കലും സasianum നാലൂ.

ഞങ്ങൾ കൂടാതെ രണ്ട് കൂടുതൽ environment variables ചേർക്കും: 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 ഉപയോഗിക്കും.

ഈ ഫങ്ഷനുകൾ മൂന്നു_ARGUMENTS_ സ്വീകരിക്കുന്നു: ഒന്നു 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 component-ഉള്ളില്‍ ഏതെങ്കിലും strings ചേർക്കുമ്പോൾ നിങ്ങളുടെ React അപേക്ഷ ഇനി സ്വയം 자동മായി തര്‍ജ്ജമ ചെയ്യും. API കീ-യുടെ read/write അനുമതികളുള്ള പരിസ്ഥിതികളിൽ മാത്രമെ പുതിയ strings ഉണ്ടാക്കാൻ കഴിയും എന്നതിന് ശ്രദ്ധിക്കുക. ഇങ്ങനെ ഒരു API കീ ഉപയോഗിച്ച് നിങ്ങളുടെ ഉല്‍പാദന അപേക്ഷ പരിശോധിക്കാൻ നിങ്ങൾക്ക് കഴിയുന്ന, അടഞ്ഞും സുരക്ഷിതവുമായ staging പരിസ്ഥിതി ഉണ്ടാകുന്നത് ഞങ്ങൾ ശുപാർശ ചെയ്യുന്നു, live-ലേക്ക് പോകുമ്ബോള്‍ പുതിയ strings ചേർക്കുക. ഇത് ആരും നിങ്ങളുടെ രഹസ്യ API കീ മോഷ്ടിക്കാൻ തടയുകയും, പുതിയ അസംബന്ധമായ strings ചേർത്തു തർജ്ജമാ പദ്ധതിയില്‍ അനാവശ്യ ഭാരവും ഉണ്ടാകാതിരിക്കാൻ സഹായിക്കും.

നിങ്ങൾക്കായി പൂർണ്ണ ഉദാഹരണം GitHub പ്രൊഫൈലിൽ പരിശോധിക്കാൻ മറക്കരുത്. അവിടെ, നിങ്ങൾക്ക് App Router ഉപയോഗിച്ച് ഇത് എങ്ങനെ ചെയ്യാമെന്ന് കാണിക്കുന്ന ഒരു ഉദാഹരണവും കാണാം! നിങ്ങള്‍ക്ക് എന്തെങ്കിലും പ്രശ്‌നങ്ങൾ ഉണ്ടായാൽ, ദയവായി ബന്ധപ്പെടുക, ഞങ്ങൾ സഹായിക്കാൻ ഏറെ സന്തോഷവാന്മാരാകും.

TacoTranslate നിങ്ങളുടെ React അപ്ലിക്കേഷനുകൾ എളുപ്പത്തിൽ ഏത് ഭാഷയിലേക്കും സ്വയമേവ ലോക്കലൈസ് ചെയ്യാൻ സഹായിക്കുന്നു. ഇന്ന് തന്നെ ആരംഭിക്കുക!