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

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

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

ഈ ഗൈഡ് App Router ഉപയോഗിക്കുന്ന Next.js അപ്ലിക്കേഷനുകൾക്കായാണ്.
നിങ്ങൾ Pages Router ഉപയോഗിക്കുന്നുവെങ്കിൽ, പകരം ഈ ഗൈഡ് കാണുക.

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

To implement internationalization in your Next.js application, we’ll first choose an i18n library. There are several popular libraries, including next-intl. In this example, however, we'll be using TacoTranslate.

TacoTranslate automatically translates your strings to any language using cutting-edge AI, and frees you from the tedious management of JSON files.

Let’s install it using npm in your terminal:

npm install tacotranslate

പടി 2: ഒരു സൗജന്യ TacoTranslate അക്കൗണ്ട് സൃഷ്ടിക്കുക

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

TacoTranslate ആപ്ലിക്കേഷൻ UI-യിൽ ഒരു പ്രോജക്ട് സൃഷ്ടിച്ച്, അതിന്റെ API കീകൾ ടാബിലേക്ക് പോകുക. ഒരു read കീയും ഒരു read/write കീയും സൃഷ്ടിക്കുക. ഞങ്ങൾ ഇവയെ പരിസ്ഥിതി വേരിയബിളുകളായി (environment variables) സംരക്ഷിക്കും. 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'; എന്ന് ശ്രദ്ധിക്കുക.

Context provider ഇപ്പോൾ ഉപയോഗിക്കാൻ തയ്യാറായതിനാൽ, ഞങ്ങളുടേ ആപ്ലിക്കേഷനിലെ റൂട്ട് ലേഔട്ട് ആയ /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 നിങ്ങളുടെ പ്രോജക്ടിന് നിങ്ങൾ സജീവമാക്കിയ എല്ലാ locale കോഡുകളും മുൻകൂട്ടി റൻഡർ ചെയ്യപ്പെടുന്നതായി ഉറപ്പാക്കുന്നു.

ഇപ്പോൾ നമുക്ക് നമ്മുടെ ആദ്യത്തെ പേജ് നിർമ്മിക്കാം! /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 സെർവർ-സൈഡ് റൻഡറിംഗ് പിന്തുണയ്ക്കുന്നു. ഇത് പരിഭാഷപ്പെടുത്തിയ ഉള്ളടക്കം ഉടൻ പ്രദർശിപ്പിക്കുന്നതിലൂടെ ഉപയോക്തൃ അനുഭവം വളരെ മെച്ചപ്പെടുന്നു, ആദ്യം പരിഭാഷയില്ലാത്ത ഉള്ളടക്കത്തിന്റെ ഒരു ഫ്ലാഷ് ഉണ്ടാകുന്നതിനുപകരം. കൂടാതെ, ഉപയോക്താവ് കാണുന്ന പേജിന് വേണ്ട പരിഭാഷകൾ നമുക്ക് ഇതിനകം ഉണ്ടായിരിക്കുന്നതിനാല്‍ ക്ലയന്റിൽ നിന്നുള്ള നെറ്റ്‌വർക്ക് അഭ്യർത്ഥനകൾ ഒഴിവാക്കാം.

സെർവർ സൈഡ് റെൻഡറിംഗ് സജ്ജമാക്കാൻ, /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);
}

Next.js മിഡിൽവെയർ ഡോക്യുമെന്റേഷൻ നുസരിച്ച് matcher ക്രമീകരിച്ചിട്ടുണ്ടെന്ന് ഉറപ്പാക്കുക.

ക്ലയന്റ്‌വശത്ത്, ഉപയോക്താവിന്റെ മുൻഗണിത ഭാഷ മാറ്റാൻ 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!