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

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

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

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

ഈ മാർഗ്ഗനിർദ്ദേശം 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 കീ ക്ലയന്റ്-സൈഡ് പ്രൊഡക്ഷൻ പരിസ്ഥിതികളിലേക്ക് ഒരിക്കലും ചോർവ്വിക്കരുതെന്ന് ഉറപ്പാക്കുക.

നമുക്ക് രണ്ട് മറ്റ് പരിസ്ഥിതി വ്യരിയബിളുകളും ചേർക്കാം: TACOTRANSLATE_DEFAULT_LOCALE മറ്റും TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: ഡിഫോൾട്ട് ഫോൾബാക്ക് ലോക്കെയിൽ കോഡ്. ഈ ഉദാഹരണത്തിൽ അത് ഇംഗ്ലീഷിന് വേണ്ടി en ആയി സെറ്റുചെയ്യാം.
• TACOTRANSLATE_ORIGIN: നിങ്ങളുടെ strings സൂക്ഷിക്കപ്പെടുന്ന "ഫോൾഡർ", ഉദാഹരണത്തിന് നിങ്ങളുടെ വെബ്‌സൈറ്റിന്റെ URL. Origin-കളെക്കുറിച്ച് ഇവിടെ കൂടുതൽ വായിക്കുക.

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 കീ ആരുമായും മോഷ്ടിക്കപ്പെടുന്നതിൽ നിന്ന് സംരക്ഷിക്കുകയും, പുതിയ, സംബന്ധമില്ലാത്ത സ്ട്രിംഗുകൾ ചേർത്തുകൊണ്ട് നിങ്ങളുടെ തർജ്ജമാ പ്രോജക്ട് അനാവശ്യമായി വ്യാപകമാവുന്നത് തടയുകയും ചെയ്യുന്നു.

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!