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 കീയും സൃഷ്ടിക്കുക. അവയെ environment variables ആയി നാം സേവ് ചെയ്യും. 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 പ്രോപ്പർട്ടികൾ. ശ്രദ്ധിക്കുക: revalidate എന്ന് getTacoTranslateStaticProps ൽ ഡീഫോൾട്ട് ആയി 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 കീ ഉപയോഗിച്ച് production ആപ്ലിക്കേഷൻ പരിശോധിച്ച് ലൈവാക്കുന്നതിന് മുമ്പ് പുതിയ സ്ട്രിംഗ്(കൾ) ചേർക്കാൻ നിങ്ങൾക്ക് ഒരു അടച്ചും സുരക്ഷിതവുമായ സ്റ്റേജിംഗ് പരിസ്ഥിതി ഉണ്ടായിരിക്കണമെന്ന് ഞങ്ങൾ ശുപാർശ ചെയ്യുന്നു. ഇത് നിങ്ങളുടെ രഹസ്യ 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!