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

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

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

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

ഈ മാർഗ്ഗനിർദ്ദേശം Pages Router ഉപയോഗിക്കുന്ന Next.js ആപ്ലിക്കേഷനുകൾക്കാണ്.
നിങ്ങൾ App 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. However, in this example, we'll be using 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 കീ ഒരിക്കലും മൊഴിമാറ്റി വിടരുതെന്ന് ഉറപ്പാക്കുക.

നാം കൂടാതെ രണ്ടുമiomോ പരിസ്ഥിതി മാറ്റികൾ കൂടി ചേർക്കും: 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, ടാക്കോ ട്രാൻസ്ലേറ്റ് പബ്ലിക് എപിഐ കീ പ്രദർശിപ്പിക്കും. ഞങ്ങൾ ഒരു പ്രാദേശിക, ടെസ്റ്റ് അല്ലെങ്കിൽ സ്റ്റേജിംഗ് പരിതസ്ഥിതിയിലാണെങ്കിൽ (isProduction is false), വിവർത്തനത്തിനായി പുതിയ സ്ട്രിംഗുകൾ അയയ്ക്കുന്നുവെന്ന് ഉറപ്പാക്കാൻ ഞങ്ങൾ രഹസ്യ read/write എപിഐ കീ ഉപയോഗിക്കും.

ഇതുവരെ, ഞങ്ങൾ Next.js അപ്ലിക്കേഷൻ പിന്തുണയുള്ള ഭാഷകളുടെ ഒരു പട്ടിക മാത്രമേ സജ്ജമാക്കിയിട്ടുള്ളൂ. അടുത്തത്, നിങ്ങളുടെ എല്ലാ പേജുകൾക്കും മൊഴിവർത്തനങ്ങൾ ലഭ്യമാക്കുകയാണ്. അതിനായി, നിങ്ങളുടെ ആവശ്യകതകൾ അനുസരിച്ച് getTacoTranslateStaticProps അല്ലെങ്കിൽ getTacoTranslateServerSideProps ഉപയോഗിക്കും.

ഈ ഫങ്ഷനുകൾ മൂന്ന്_argument_ എടുക്കുന്നു: ഒരെണ്ണം 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 അനുമതികളുള്ള പരിചരണമേഖലകൾക്കുതന്നെയാണ് പുതിയ വിവർത്തനത്തിനായി സ്ട്രിംഗ്‌സ് സൃഷ്ടിക്കാനാകുക എന്നതിനുള്ള ശ്രദ്ധിക്കേണ്ടതാണ്. živകാരമായും സുരക്ഷിതമായ ഒരു സ്റ്റേജിംഗ് പരിസ്ഥിതി തയ്യാർ വെക്കാൻ ഞങ്ങൾ ശുപാർശ ചെയ്യുന്നു, അങ്ങനെ നിങ്ങൾക്ക് പ്രോഡക്ഷൻ അപ്ലിക്കേഷൻ ആപ്ലിക്കേഷൻ 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!