Pages Router ഉപയോഗിക്കുന്ന Next.js ആപ്ലിക്കേഷനിൽ അന്തർരാഷ്ട്രീകരണം എങ്ങനെ നടപ്പിലാക്കാം

നിങ്ങളുടെ React അപ്ലിക്കേഷൻ കൂടുതല്‍ പ്രാപ്യമായും, അന്താരാഷ്ട്രവല്‍ക്കരണം (i18n) വഴി പുതിയ വിപണികളിലും എത്തിച്ചേരുകയും ചെയ്യൂ.

ലോകം കൂടുതൽ ഗ്ലോബലൈസ്ഡ് ആകുമ്പൊൾ, വ്യത്യസ്ത രാജ്യങ്ങളിലും സംസ്കാരങ്ങളിലും നിന്നുള്ള ഉപയോക്താക്കളെ പരിപാലിക്കാൻ കഴിയുന്ന ആപ്ലിക്കേഷനുകൾ നിർമ്മിക്കുന്നത് വെബ് ഡെവലപ്പർമാർക്ക് വർദ്ധിച്ച പണിയാകും. ഇത് കൈവരിക്കാൻ പ്രധാന മാർഗങ്ങളിൽ ഒരുനാണ് അന്താരാഷ്ട്രവത്കരണം (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 കീയും സൃഷ്‌ടിക്കുക. ഇവയെ നാം environment variables ആയി സേവ് ചെയ്യും. read കീയാണ് നാം പറയുന്നത് public എന്ന്, കൂടാതെ read/write കീയാണ് secret. ഉദാഹരണത്തിന്, ഇവയെ നിങ്ങളുടെ പ്രോജക്ടിന്റെ റൂട്ടിലെ .env ഫയലിലേക്ക് ചേർക്കാവുന്നതാണ്.

.env

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

ക്ലയന്റ് സൈഡ് പ്രൊഡക്ഷൻ പരിസ്ഥിതികളിലേക്ക് രഹസ്യമായ read/write API കീ ഒരിക്കലും ലൈക് ചെയ്യരുത്.

നാം രണ്ട് പരിസ്ഥിതി വ്യത്യാസങ്ങൾ കൂടി ചേർക്കും: TACOTRANSLATE_DEFAULT_LOCALE and TACOTRANSLATE_ORIGIN.

TACOTRANSLATE_DEFAULT_LOCALE: ഡിഫോൾട്ട് ഫോൾബാക് ലോക്കേൽ കോഡ്. ഈ ഉദാഹരണത്തിൽ, നാം അതിനെ en എന്ന ഇംഗ്ലിഷിനായി സജ്ജീകരിക്കും.
TACOTRANSLATE_ORIGIN: നിങ്ങളുടെ സ്‌ട്രിങ്ങുകൾச் സേവ് ചെയ്യപ്പെടുന്ന “ഫോൾഡർ”, നിങ്ങളുടെ വെബ്സൈറ്റ് URL പോലെയാണ്. ഇവിടെ ഓറിജിനുകളെക്കുറിച്ച് കൂടുതൽ വായിക്കുക.

.env

TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com

പടി 3: TacoTranslate സജ്ജീകരിക്കൽ

TacoTranslate നിങ്ങളുടെ അപ്ലിക്കേഷനുമായി സംയോജിപ്പിക്കാൻ, മുൻപ് ലഭിച്ച API കീകൾ ഉപയോഗിച്ച് ഒരു ക്ലയന്റ് സൃഷ്ടിക്കേണ്ടതാണ്. ഉദാഹരണത്തിന്, /tacotranslate-client.js എന്ന പേരിൽ ഒരു ഫയൽ സൃഷ്ടിക്കൂ.

/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 പ്രൊവൈഡറെ ചേർക്കാം.

/pages/_app.tsx

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 സൃഷ്‌ടിക്കുകയോ മാറ്റങ്ങളിടുകയോ ചെയ്യുന്നത് ആയിരിക്കും.

/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 പരിശോധന സജ്ജീകരിക്കുക. If true, TacoTranslate പബ്ലിക്ക് API കീയായി കാണിക്കും. ഞങ്ങൾ ലോക്, ടെസ്റ്റ്, അല്ലെങ്കിൽ സ്റ്റേജിംഗ് പരിസരത്താണ് (isProduction is false) എങ്കിൽ, പുതിയ സ്‌ട്രിംഗ്‌കൾ വിവർത്തനത്തിന് അയച്ചു പോകുന്നതിനായി രഹസ്യ read/write API കീ ഉപയോഗിക്കും.

ഇപ്പോൾവരെ, നാം Next.js അപ്ലിക്കേഷനെ പിന്തുണയ്ക്കുന്ന ഭാഷകളുടെ പട്ടികയോടെയാണ് സേട്ടപ്പ് ചെയ്തത്. അടുത്തതായി നാം ചെയ്യേണ്ടത് നിങ്ങളുടെ എല്ലാ പേജുകൾക്കും തർജ്ജമകൾ എടുത്തെടുക്കുകയാണ്. അതിന്, നിങ്ങളുടെ ആവശ്യാനുസരണം getTacoTranslateStaticProps അല്ലെങ്കിൽ getTacoTranslateServerSideProps ഉപയോഗിക്കാം.

ഈ ഫംഗ്ഷനുകൾക്ക് മൂന്ന് аргUMENTുകൾ ആവശ്യമാണ്: ഒന്ന് Next.js Static Props Context ഓബ്ജക്റ്റ്, TacoTranslate-നുള്ള കോൺഫിഗറേഷൻ, കൂടാതെ ഓപ്ഷണൽ Next.js പ്രോപ്പർട്ടികൾ. getTacoTranslateStaticProps ൽ revalidate സാധാരണയായി 60 ആയി സജ്ജീകരിച്ചിട്ടുണ്ടെന്ന് ശ്രദ്ധിക്കുക, അതുവഴി നിങ്ങളുടെ വിവർത്തനങ്ങൾ تازه നിലയിൽ തുടരും.

ഒരു പേജിൽ ഏതെങ്കിലും ഫംഗ്ഷൻ ഉപയോഗിക്കാൻ, നിങ്ങളുടെ പേജ് ഫയൽ /pages/hello-world.tsx പോലെയാണെന്ന് ധരിക്കാം.

/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: വിന്യാസം ചെയ്ത് പരിശോദിക്കുക!

നമ്മള്‍ കഴിഞ്ഞു! നിങ്ങളുടെ React അപ്ലിക്കേഷന്‍ ഇനി Translate കോംപONENT-ല്‍ ഏതെങ്കിലും സ്ട്രിങ്ങുകൾ ചേർക്കുമ്പോൾ സ്വയം വിവർത്തനം ചെയ്‌തുകൊടുക്കും. API കീയിൽ read/write അനുമതികൾ ഉള്ള പരിസ്ഥിതികളിൽ മാത്രം പുതിയ വിവർത്തനങ്ങൾക്ക് വേണ്ട സ്ട്രിങ്ങുകൾ സൃഷ്ടിക്കാൻ സാധിക്കും എന്ന് ശ്രദ്ധിക്കുക. നിങ്ങളുടെ പ്രൊഡക്ഷൻ അപ്ലിക്കേഷൻ ഇത്തരം API കീ ഉപയോഗിച്ച് ടെസ്റ്റ് ചെയ്യാൻ കഴിയുന്ന, അടച്ചുപൂട്ടിയ, സുരക്ഷിതമായ സ്റ്റേജിംഗ് പരിസ്ഥിതി ഉണ്ടാകുന്നത് ഞങ്ങൾ ശുപാർശ ചെയ്യുന്നു, ലൈവ് ആക്കുന്നതിനു മുമ്പ് പുതിയ സ്ട്രിങ്ങുകൾ ചേർക്കുന്നതിന്. ഇത് നിങ്ങളുടെ രഹസ്യ API കീ ചതിയാകുന്നത് തടയുകയും, പുതിയ, ബന്ധപ്പെട്ടില്ലാത്ത സ്ട്രിങ്ങുകൾ ചേർത്തുപിടിച്ച് നിങ്ങളുടെ തർജ്ജുമ പ്രൊജക്ട് അനാവശ്യമായി വലുതാക്കുന്നത് തടയുകയും ചെയ്യും.