Next.js ആപ്പുകളിൽ അന്താരാഷ്ട്രീകരണത്തിന് (i18n) ഏറ്റവും മികച്ച പരിഹാരം

എങ്ങനെ പ്രവർത്തിക്കുന്നു

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

ഈ ട്യൂട്ടോറിയലിൽ, സേർവർ സൈഡ് റൺഡറിംഗുമായി നിങ്ങൾക്ക് നിങ്ങളുടെ React Next.js ആപ്ലിക്കേഷനിലേക്ക് ഇന്റർനാഷണലൈസേഷൻ എങ്ങനെ ചേർക്കാമെന്ന് പരിശോധിക്കacağız. TL;DR: See the full example here.

ഈ ഗൈഡ് 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 കീ ക്ലയന്റ് സൈഡ് പ്രൊഡക്ഷൻ എൻവയോൺമെന്റുകളിൽ ഒരിക്കലും പുറത്തുവിടരുത്.

നാം രണ്ട് അധികം environment variables കൂടി ചേർക്കാൻ പോകുകയാണ്: 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_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: വിന്യസിച്ച് പരീക്ഷിക്കുക!

ഞങ്ങൾ പൂർത്തിയായി! നിങ്ങൾ ഏതെങ്കിലും സ്റ്റ്രिङ് Translate ഘടകത്തിൽ ചേർക്കുമ്പോൾ നിങ്ങളുടെ Next.js അപ്ലിക്കേഷൻ ഇപ്പോൾ സ്വയമേവ പരിഭാഷപ്പെടുത്തപ്പെടും. 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 App 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!