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

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

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

ഈ ഗൈഡ് App Router ഉപയോഗിക്കുന്ന Next.js ആപ്ലിക്കേഷനുകൾക്കായാണ്.
നിങ്ങൾ Pages 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 പോലുള്ളത്. മൂലങ്ങളെപ്പറ്റി കൂടുതൽ വായിക്കുക.

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

പടി 3: TacoTranslate സജ്ജമാക്കൽ

To integrate TacoTranslate with your application, you’ll need to create a client using the API keys from earlier. For example, create a file named /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 നിർവചിക്കാനുള്ളതു imminently.

ക്ലയന്റിനെ വേർതിരിച്ച ഫയലിൽ സൃഷ്‌ടിക്കുന്നത് പിന്നീട് വീണ്ടും ഉപയോഗിക്കാൻ എളുപ്പമാക്കുന്നു. 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 Middleware ഡോക്യുമെന്റേഷൻ അനുസരിച്ച് ക്രമീകരിച്ചു വരുത്തുക എന്നതിൽ ശ്രദ്ധിക്കുക.

ക്ലയന്റിൽ, ഉപയോക്താവിന്റെ മുൻ‌ഗണന ഭാഷ എന്താണെന്ന് മാറ്റാൻ നിങ്ങൾക്ക് locale കുക്കി മാറ്റാം. ഇത് എങ്ങനെ ചെയ്യാമെന്ന് ആശയങ്ങൾക്കായി ദയവായി സമഗ്ര ഉദാഹരണ കോഡ് കാണുക!

പടി 5: ഡിപ്ലോയ് ചെയ്ത് പരിശോധന നടത്തുക!

നമ്മൾ കഴിഞ്ഞു! നിങ്ങൾ Translate ഘടകത്തിൽ ഏതെങ്കിലും സ്ട്രിങുകൾ ചേർക്കുമ്പോൾ നിങ്ങളുടെ React ആപ്ലിക്കേഷൻ ഇപ്പോൾ സ്വയം ترجم ചെയ്യപ്പെടും. API കീവിന് read/write അനുമതികൾ ഉള്ള പരിസരങ്ങൾ മാത്രമേ ترجم ചെയ്യാനുള്ള പുതിയ സ്ട്രിങുകൾ உருவാക്കാൻ കഴിയൂ എന്നത് ശ്രദ്ധിക്കുക. നിങ്ങൾക്ക് ലൈവ് ആയി പോകുന്നതിനു മുമ്പ് പുതിയ സ്ട്രിങുകൾ ചേർക്കുന്ന രീതിയിൽ ഇത്തരത്തിലുള്ള API കീ ഉപയോഗിച്ച് നിങ്ങളുടെ പ്രൊഡക്ഷൻ ആപ്ലിക്കേഷൻ പരീക്ഷിക്കാനായി ഒരു അടച്ചും സുരക്ഷിതവുമായ സ്റ്റേജിംഗ് പരിസരം ഉണ്ടാകണമെന്ന് ഞങ്ങൾ ശുപാർശ ചെയ്യുന്നു. ഇത് നിങ്ങളുടെ രഹസ്യ API കീ ഉണ്ടാക്കി കവർച്ച ചെയ്യുന്നതിൽ നിന്നും ആരെയും തടയും, കൂടാതെ പുതിയ, ബന്ധമില്ലാത്ത സ്ട്രിങുകൾ ചേർത്തുകൊണ്ട് നിങ്ങളുടെ traducción പ്രോജക്ട് അനാവശ്യമായി വലുതാക്കുന്നതിൽ നിന്ന് ഒഴിവാക്കും.

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

TacoTranslate നിങ്ങളുടെ React അപ്ലിക്കേഷനുകൾ എളുപ്പത്തിൽ ഏത് ഭാഷയിലേക്കും തിരിച്ച് സ്വയം പ്രാദേശീകരിക്കാൻ അനുവദിക്കുന്നു. ഇന്ന് തന്നെ ആരംഭിക്കൂ!