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

ലോകം കൂടുതൽ ആഗോളമാകുമ്പോൾ, വ്യത്യസ്ത രാജ്യങ്ങളിലെയും സംസ്കാരങ്ങളിലെയും ഉപഭോക്താക്കളെ പരിഗണിച്ച് വെബ് ഡെവലപ്പർമാർക്ക് ആപ്ലിക്കേഷനുകൾ രൂപകൽപ്പന ചെയ്യേണ്ടതിന്റെ പ്രാധാന്യം കൂടുതൽ കൂടുകയാണ്. ഇതു കൈവരിക്കാൻ സഹായിക്കുന്ന പ്രധാന മാർഗങ്ങളിൽ ഒന്ന് അന്താരാഷ്ട്രവൽക്കരണം (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 കീ ക്ലയന്റ്-സൈഡ് പ്രൊഡക്ഷൻ പരിസ്ഥിതികളിലേക്ക് ഒരിക്കലും ചോർത്തുവിടരുതെന്ന് ഉറപ്പാക്കുക.

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

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

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 ഉപയോഗിക്കാം.

ഈ ഫംഗ്ഷനുകൾ മൂന്ന് ആർഗ്യുമെന്റുകൾ സ്വീകരിക്കുന്നു: ഒരു 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: വിന്യാസം ചെയ്ത് പരിശോധിക്കൂ!

ഞങ്ങൾ പൂർത്തിയാക്കി! നിങ്ങളുടെ React അപ്ലിക്കേഷൻ ഇനി Translate കോമ്പോണന്റിൽ നിങ്ങൾ ഏതെങ്കിലും സ്ട്രിംഗ് ചേർത്താൽ സ്വയമേവ പരിഭാഷിക്കപ്പെടും. ശ്രദ്ധിക്കുക: API കീയിൽ read/write അനുമതികളുള്ള പരിസ്ഥിതികളിലാണ് മാത്രമേ പുതിയ പരിഭാഷയ്ക്ക് വേണ്ടിയുള്ള സ്ട്രിംഗ്‌లు സൃഷ്ടിക്കാൻ കഴിയൂ എന്നത്. ഇത്തരമൊരു API കീ ഉപയോഗിച്ച് നിങ്ങളുടെ പ്രൊഡക്ഷൻ ആപ്ലിക്കേഷൻ അവിടെ പരീക്ഷിക്കാനും ലൈവ് നൽകുന്നതിന് മുമ്പ് പുതിയ സ്ട്രിംഗ്‌లు ചേർക്കാനും കഴിയുന്ന വിധത്തിൽ ഒരു അടച്ചും സുരക്ഷിതവുമായ സ്റ്റേജിംഗ് പരിസ്ഥിതി ունենալണമെന്ന് ഞങ്ങൾ ശിപാർശിക്കുന്നു. ഇത് എവർക്കും എവർക്കും (anyone anyone) നിങ്ങളുടെ രഹസ്യ API കീ മോഷ്ടിക്കപ്പെടുന്നതിൽ നിന്ന് പ്രതിരോധിക്കുകയും, ബന്ധമില്ലാത്ത പുതിയ സ്ട്രിംഗ്‌లు ചേർത്തുകൊണ്ട് നിങ്ങളുടെ പരിഭാഷാ പ്രോജക്ട് അമിതമായി വലുതാകാനുള്ള സാധ്യത കുറക്കുകയും ചെയ്യും.

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

TacoTranslate നിങ്ങളുടെ React അപ്ലിക്കേഷനുകൾ 75-ലധികം ഭാഷകളിലേക്കും അവയിൽ നിന്ന് തിരിച്ചു എത്തുന്നതും ഓട്ടോമാറ്റിക്കായി ലൊക്കലൈസ് ചെയ്യാൻ അനുവദിക്കുന്നു. ഇന്നുതന്നെ ആരംഭിക്കൂ!