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

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

ലോകം കൂടുതൽ ആഗോളമാകുന്നതിനാൽ, വെബ് ഡെവലപ്പർമാർക്ക് വിവിധ രാജ്യങ്ങളിലെയും സംസ്കാരങ്ങളിലെയും ഉപയോക്താക്കളെ പരിഗണിച്ച് അപ്ലിക്കേഷനുകൾ നിർമ്മിക്കുക semakin കൂടുതൽ പ്രധാനമാകുന്നു. ഈ ലക്ഷ്യം നേടാനുള്ള പ്രധാന മാർഗങ്ങളിൽ ഒന്നാണ് ഇന്റർനാഷണലൈസേഷൻ (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: നിങ്ങളുടെ സ്ട്രിങുകൾ സൂക്ഷിക്കപ്പെടുന്ന “ഫോൾഡർ”, ഉദാഹരണത്തിന് നിങ്ങളുടെ വെബ്സൈറ്റിന്റെ 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!"/>;
}

ഇപ്പോൾ നിങ്ങൾക്ക് Translate ഘടകം ഉപയോഗിച്ച് നിങ്ങളുടെ എല്ലാ React ഘടകങ്ങളിലുമുള്ള സ്ട്രിംഗുകൾ വിവർത്തനം ചെയ്യാൻ കഴിയണം.

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!