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

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

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

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

ഈ ഗൈഡ് Pages Router ഉപയോഗിക്കുന്ന Next.js ആപ്ലിക്കേഷനുകൾക്കാണ്.
നിങ്ങൾ App 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യും 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: വിന്യസിച്ച് പരീക്ഷിക്കുക!

ഞങ്ങൾ പൂർത്തിയാക്കി! നിങ്ങളുടെ Next.js അപ്ലിക്കേഷൻ ഇനി നിങ്ങൾ ഏത് സ്ട്രിങും 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 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!