Next.js ആപ്ലിക്കേഷനില്‍ App Router ഉപയോഗിച്ച് ഇന്റര്‍നാഷണലൈസേഷന്‍ എങ്ങനെയാണ് നടപ്പാക്കുന്നത്

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

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

ഈ ഗൈഡ് App Router ഉപയോഗിക്കുന്ന Next.js ആപ്ലിക്കേഷനുകൾക്കായാണ്.
നിങ്ങൾ Pages Router ഉപയോഗിക്കുന്നట్లായenkil, പകരം ഈ ഗൈഡ് കാണുക.

പടി 1: ഒരു i18n ലൈബ്രറി ഇൻസ്റ്റാൾ ചെയ്യുക

നിങ്ങളുടെ Next.js ആപ്ലിക്കേഷനിൽ അന്താരാഷ്ട്രവൽക്കരണം നടപ്പാക്കാൻ, ആദ്യം ഒരു i18n ലൈബ്രറി തിരഞ്ഞെടുക്കും. പല പ്രശസ്ത ലൈബ്രറികളും ഉണ്ട്, അവയിൽ next-intl ഉൾപ്പെടുന്നു. എങ്കിലും, ഈ ഉദാഹരണത്തിൽ, നമ്മൾ TacoTranslate ഉപയോഗിക്കുകയാണ്.

TacoTranslate അതിയുത്തമമായ AI ഉപയോഗിച്ച് നിങ്ങളുടെ സ്റ്റ്രിംഗുകൾ ഏത് ഭാഷയിലേക്കും സ്വയം തർജ്ജമചെയ്യുന്നു, കൂടാതെ JSON ഫയലുകളുടെ പതിച്ച മാനേജ്മെന്റിൽ നിന്നുമാണ് ഇത് നിങ്ങളെ മോചിപ്പിക്കുന്നത്.

നിങ്ങളുടെ ടെർമിനലിൽ npm ഉപയോഗിച്ച് ഇത് ഇൻസ്റ്റാൾ ചെയ്യാം:

npm install tacotranslate

പടി 2: ഒരു സ്വതELCOME TacoTranslate അക്കൗണ്ട് സൃഷ്ടിക്കുക

ഇപ്പോൾ നിങ്ങൾ മൊഡ്യൂൾ ഇൻസ്റ്റാൾ ചെയ്തു കഴിഞ്ഞതാണ്, നിങ്ങളുടെ TacoTranslate അക്കൗണ്ട്, ഒരു പരിഭാഷാ പ്രോജക്റ്റ്, കൂടാതെ അനുബന്ധ API കീകൾ സൃഷ്ടിക്കാനുള്ള സമയം ആണ്. ഇവിടെയാണ് അക്കൗണ്ട് ഉണ്ടാക്കുക. ഇത് സൗജന്യമാണ്, കൂടാതെ ക്രെഡിറ്റ് കാർഡ് ചേർക്കേണ്ട ആവശ്യമില്ല.

TacoTranslate ആപ്ലിക്കേഷൻ UI-യിൽ, ഒരു പ്രോജക്റ്റ് സൃഷ്ടിച്ച് അതിന്റെ API കീകൾ ടാബിലേക്ക്.navigate ചെയ്യുക. ഒരു 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 പോലുള്ളത്. ഓറിജിനുകളുടെ കുറിച്ച് കൂടുതൽ വായിക്കാൻ ഇവിടെ ക്ലിക്കുക.

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!" />
	);
}

Next.js-ന് 60 സെക്കൻഡ് കഴിഞ്ഞ് പേജ് വീണ്ടും നിർമ്മിക്കണമെന്ന്, നിങ്ങളുടെ വിവർത്തനങ്ങൾ പുതുക്കിയ നിലയിൽ സൂക്ഷിക്കണമെന്ന് അറിയിക്കുന്ന revalidate എന്ന ചഞ്ചലവരീതിയോട് ശ്രദ്ധിക്കുക.

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

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

സെർവർ സൈഡ് റെന്ററിങ് സജ്ജമാക്കാൻ, /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 കുക്കി മാറ്റാവുന്നതാണ്. ഇത് എങ്ങനെ ചെയ്യാമെന്ന് മനസിലാക്കാൻ സമ്പൂർണ്ണ ഉദാഹരണ കോഡ് കാണുക!

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

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

Be sure to check out the complete example over at our GitHub profile. There, you’ll also find an example of how to do this using the Pages Router! If you encounter any problems, feel free to reach out, and we’ll be more than happy to help.

TacoTranslate lets you automatically localize your React applications quickly to and from over 75 languages. Get started today!