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

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

ഈ ലേഖനത്തിൽ, നാം React Next.js അപ്ലിക്കേഷനിൽ ആന്തരീക്ഷീകരണം സേർവർ സൈഡ് റെൻഡറിംഗിനോടുകൂടി എങ്ങനെ ചേർക്കാമെന്നത് അന്വേഷിക്കും. TL;DR: പൂർണ്ണ ഉദാഹരണം ഇവിടെ കാണുക.

ഈ ഗൈഡ് App Router ഉപയോഗിക്കുന്ന Next.js ആപ്ലിക്കേഷനുകൾക്കുള്ളതാണ്.
നിങ്ങൾ Pages 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 and 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_IS_PRODUCTION === 'true'
			? process.env.TACOTRANSLATE_PROJECT_LOCALE
			: undefined,
});

module.exports = tacoTranslate;

നാം ഉടൻ തന്നെ സ്വയം TACOTRANSLATE_API_KEY ഉം TACOTRANSLATE_PROJECT_LOCALE ഉം നിർവ്വചിക്കുകയാണെന്ന്.

ക്ലയന്റ് വേറെ ഒരു ഫയലായി സൃഷ്ടിക്കുന്നത് പിന്നീട് ആവർത്തിച്ച് ഉപയോഗിക്കാൻ എളുപ്പമാക്കുന്നു. getLocales കുറച്ച് ഇൻബിൽറ്റ് പിശക് കൈകാര്യം ചെയ്യുന്ന ഒരു യൂറ്റിലിറ്റി ഫങ്ക്ഷൻ മാത്രമാണ്. ഇപ്പോൾ, /app/[locale]/tacotranslate.tsx എന്നു പേരുള്ള ഒരു ഫയൽ സൃഷ്ടിക്കുക, അവിടെ നമ്മൾ TacoTranslate പ്രൊവൈഡർ നടപ്പിലാക്കും.

'use client';

import React, {type ReactNode} from 'react';
import {
	type TranslationContextProperties,
	TacoTranslate as ImportedTacoTranslate,
} from 'tacotranslate/react';
import tacoTranslateClient from '@/tacotranslate-client';

export default function TacoTranslate({
	locale,
	origin,
	localizations,
	children,
}: TranslationContextProperties & {
	readonly children: ReactNode;
}) {
	return (
		<ImportedTacoTranslate
			client={tacoTranslateClient}
			locale={locale}
			origin={origin}
			localizations={localizations}
		>
			{children}
		</ImportedTacoTranslate>
	);
}

ഈത് ഒരു ക്ലയന്റ് ഘടകമാണെന്ന് സൂചിപ്പിക്കുന്ന 'use client'; ശ്രദ്ധിക്കുക.

കോൺറെക്സ്റ്റ് പ്രൊവൈഡർ ഇപ്പോൾ തയ്യാറായി കഴിഞ്ഞതിനാൽ, നമ്മുടെ ആപ്പ്ലിക്കേഷനിലെ റൂട്ട് ലേയൗട്ടായ /app/[locale]/layout.tsx എന്ന ഫയൽ സൃഷ്ടിക്കുക. ഈ പാഥിന് Dynamic Routes ഉപയോഗിക്കുന്ന ഫോളഡർ ഉണ്ടെന്ന് ശ്രദ്ധിക്കുക, ഇവിടെ [locale] ഡൈനാമിക് പാരാമീറ്ററാണ്.

import React, {type ReactNode} from 'react';
import {type Locale, isRightToLeftLocaleCode} from 'tacotranslate';
import './global.css';
import tacoTranslateClient from '@/tacotranslate-client';
import TacoTranslate from './tacotranslate';

export async function generateStaticParams() {
	const locales = await tacoTranslateClient.getLocales();
	return locales.map((locale) => ({locale}));
}

type RootLayoutParameters = {
	readonly params: Promise<{locale: Locale}>;
	readonly children: ReactNode;
};

export default async function RootLayout({params, children}: RootLayoutParameters) {
	const {locale} = await params;
	const origin = process.env.TACOTRANSLATE_ORIGIN;
	const localizations = await tacoTranslateClient.getLocalizations({
		locale,
		origins: [origin /* , other origins to fetch */],
	});

	return (
		<html lang={locale} dir={isRightToLeftLocaleCode(locale) ? 'rtl' : 'ltr'}>
			<body>
				<TacoTranslate
					locale={locale}
					origin={origin}
					localizations={localizations}
				>
					{children}
				</TacoTranslate>
			</body>
		</html>
	);
}

ഇവിടെ ആദ്യം ശ്രദ്ധിക്കേണ്ടത് നമ്മുടെ Dynamic Route പാരാമീറ്റർ [locale] ആ ഭാഷയ്ക്ക് വേണ്ടിയുള്ള വാക്കുകളെ തിരയാൻ ഉപയോഗിക്കുന്നു എന്നതാണ്. കൂടാതെ, generateStaticParams നിങ്ങളുടെ പ്രോജക്റ്റിനായി സജീവമാക്കിയ എല്ലാ ലോക്കൽ കോഡുകളും മുൻകൂട്ടി റെൻഡർ ചെയ്യപ്പെടുന്നത് ഉറപ്പാക്കുന്നു.

ഇപ്പോൾ, നമ്മുടെ ആദ്യ പേജ് നിർമ്മിക്കാം! /app/[locale]/page.tsx എന്ന പേരിൽ ഒരു ഫയൽ ഉണ്ടാക്കുക.

import React from 'react';
import {Translate} from 'tacotranslate/react';

export const revalidate = 60;
export default async function Page() {
	return (
		<Translate string="Hello, world!" />
	);
}

60 സെക്കൻഡ് കഴിഞ്ഞ് പേജ് പുനർനിർമാണം നടത്താനും നിങ്ങളുടെ വിവർത്തനങ്ങൾ നിലവിലുള്ളതാക്കാനും Next.js-ന് അറിയിക്കുന്ന revalidate 변수를 ശ്രദ്ധിക്കുക.

പടി 4: സെർവർ സൈഡ് റെൻഡറിംഗ് നടപ്പാക്കൽ

TacoTranslate സെർവർ സൈഡ് റെൻഡറിംഗ് പിന്തുണയ്ക്കുന്നു. ഇത് ഉപയോഗക്കാർക്ക് ഇഷ്ടാനുസൃതമായ അനുഭവം വേഗത്തിൽ ലഭ്യമാക്കുന്നു, ആദ്യമായി അനുuvadിച്ചിട്ടില്ലാത്ത ഉള്ളടക്കത്തിന്റെ ഒരു തിളക്കമുണ്ടാകുന്നതിന बजाय, അത് ഉടൻ തർജ്ജമ ചെയ്ത ഉള്ളടക്കം ദർശിപ്പിച്ച്. കൂടാതെ, ഉപഭോക്തൃഭാഗത്ത് നെറ്റ്‌വർക്ക് അഭ്യർത്ഥനകൾ ഒഴിവാക്കാം, കാരണം നാം ഇതിനകം തന്നെ ഉപഭോക്താവ് കാണുന്ന പേജിനുള്ള ആവശ്യമായ തർജ്ജമകൾ കൈപ്പിടിയിലുണ്ട്.

സെർവർ സൈഡ് റെൻഡറിംഗ് സജ്ജമാക്കാൻ, /next.config.js സൃഷ്ടിക്കുകയോ മാറ്റിയിരിക്കുകയോ ചെയ്യുക:

const withTacoTranslate = require('tacotranslate/next/config').default;
const tacoTranslateClient = require('./tacotranslate-client');

module.exports = async () => {
	const config = await withTacoTranslate(
		{},
		{
			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'),
		}
	);

	// NOTE: Remove i18n from config when using the app router
	return {...config, i18n: undefined};
};

നിങ്ങളുടെ സജ്ജീകരണത്തിന് അനുയോജ്യമായി isProduction പരിശോധന മാറ്റി തയ്യാറാക്കുക. true ആണെങ്കിൽ, TacoTranslate പൊതു API കീ പ്രദർശിപ്പിക്കും. നാം ലോക്കൽ, പരിശോധന, അല്ലെങ്കിൽ സ്റ്റേജിംഗ് പരിസ്ഥിതിയിൽ (isProduction is false) ആണെങ്കിൽ, പുതിയ സ്ട്രിങ്ങുകൾ വിവർത്തനത്തിനായി അയയ്ക്കപ്പെടുന്നുണ്ടെന്ന് ഉറപ്പാക്കാൻ രഹസ്യമായ read/write API കീ ഉപയോഗിക്കും.

റൂട്ടിംഗ്‌യും റീഡയറക്ഷനും പ്രതീക്ഷിച്ചതുപോലെ പ്രവർത്തിക്കുന്നുവെന്ന് ഉറപ്പാക്കുവാൻ, ഞങ്ങൾക്ക് /middleware.ts എന്ന ഫയൽ സൃഷ്‌ടിക്കേണ്ടതുണ്ട്. Middleware ഉപയോഗിച്ച്, ഉപയോക്താക്കളെ അവരുടെ ഇഷ്ടഭാഷയിൽ പ്രദർശിപ്പിച്ച പേജുകളിലേക്ക് റീഡയറക്ട് ചെയ്യാൻ കഴിയും.

import {type NextRequest} from 'next/server';
import {middleware as tacoTranslateMiddleware} from 'tacotranslate/next';
import tacoTranslate from '@/tacotranslate-client';

export const config = {
	matcher: ['/((?!api|_next|favicon.ico).*)'],
};

export async function middleware(request: NextRequest) {
	return tacoTranslateMiddleware(tacoTranslate, request);
}

നിങ്ങളുടെ matcher Next.js മിഡിൽവെയർ രേഖാമൂലം Next.js Middleware documentation അനുസരിച്ച് ക്രമീകരിച്ചിട്ടുണ്ടെന്ന് ഉറപ്പാക്കുക.

ക്ലയന്റിൽ, ഉപയോക്താവിന്റെ മുൻഗണന ഭാഷ മാറ്റുന്നതിനായി locale കുക്കി മാറ്റാൻ നിങ്ങൾക്ക് കഴിയും. ഇത് എങ്ങനെ ചെയ്യാമെന്ന് ഐഡിയ blood view ചെയ്യാൻ പൂർണ ഉദാഹരണ കോഡ് ഇവിടെ കാണുക!

പടി 5: വിന്യസിക്കുകയും പരീക്ഷിക്കുകയും ചെയ്യുക!

നാം പൂർത്തിയായി! നിങ്ങൾ Translate component-ലേക്ക് ഏതെങ്കിലും strings ചേർക്കുമ്പോൾ നിങ്ങളുടെ React അപ്ലിക്കേഷൻ സ്വയം مترجمമായിരിക്കും. API കീയിൽ read/write അനുമതികൾ ഉള്ള പരിസരങ്ങൾ മാത്രവും مترجمക്കാനുള്ള പുതിയ strings സൃഷ്ടിക്കാനാകും. നിങ്ങളുടെ പ്രൊഡക്ഷൻ അപ്ലിക്കേഷൻ ആപ്ലിക്കേഷനിൽ പരീക്ഷിക്കുന്നതിനായി അത്തരം API കീ ഉപയോഗിച്ച് അടച്ചും സുരക്ഷിതവുമായ staging പരിസരമുണ്ടായിരിക്കണമെന്ന് ഞങ്ങൾ ശിപാർശ ചെയ്യുന്നു, ലൈവ് செல்லുന്നതിന് മുമ്പ് പുതിയ strings ചേർക്കുന്നതിനായി. ഇതവഴിയാൽ ആരും നിങ്ങളുടെ രഹസ്യ API കീ കവര്‍ച്ച ചെയ്യുന്നതിലോ, അനാവഷ്യം مترجمാ പ്രോജക്റ്റ് അനധികൃതമായ പുതിയ strings ചേർത്തുകൊണ്ട് വീതിവരുത്തുന്നതിലോ നിന്നു പ്രതിരോധിക്കാവുന്നതാണ്.

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

TacoTranslate നിങ്ങളുടെ React ആപ്ലിക്കേഷനുകളെ യഥാർത്ഥ സമയത്ത് ഏതൊരു ഭാഷയിലേക്കും തൽക്ഷണം ലോക്കലൈസ് ചെയ്യാൻ അനുവദിക്കുന്നു. ഇന്ന് തന്നെ തുടങ്ങി നോക്കൂ!