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

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

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

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

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

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

ഈ ഫങ്ക്ഷനുകള്‍ മൂന്നു арг്യുമെന്റുകള്‍ സ്വീകരിക്കുന്നു: ഒരു Next.js Static Props Context ഒബ്ജക്ട്, TacoTranslate ന്റെ സജ്ജീകരണം, ഒപ്പം ഐച്ഛികമായ Next.js പ്രോപ്പർട്ടികൾ. getTacoTranslateStaticProps ൽ revalidate 默认 olaraq 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 അനുമതികളുള്ള പരിസ്ഥിതികളിൽ മാത്രം പുതിയ സ്ട്രിംഗ്‌സ് ترجمة ചെയ്യുന്നതിന് സൃഷ്ടിക്കാൻ സാധിക്കുമെന്ന് ശ്രദ്ധിക്കുക. നിങ്ങളുടെ പ്രൊഡക്ഷൻ അപ്ലിക്കേഷൻ ഈതരം API കീ ഉപയോഗിച്ച് ടെസ്റ്റ് ചെയ്യാൻ നിങ്ങൾക്ക് ഒരു അടച്ചിട്ടും സുരക്ഷിതമായ സ്റ്റേജിംഗ് പരിസ്ഥിതി ഉണ്ടായിരിക്കണമെന്ന് ഞങ്ങൾ ശുപാർശ ചെയ്യുന്നു, ലൈവ് പോകുന്നതിന് മുൻപ് പുതിയ സ്ട്രിംഗ്‌സ് ചേർക്കുന്നതിന്. ഇതിലൂടെ ആരും നിങ്ങളുടെ രഹസ്യ API കീ മോഷ്ടിക്കാൻ കഴിയില്ല, കൂടാതെ പുതിയ, അസംബന്ധമായ സ്ട്രിംഗ്‌സ് ചേർക്കുക മുഖേന നിങ്ങളുടെ ترجمة പ്രോജക്റ്റ് വളരുന്നത് തടയുകയും ചെയ്യും.

താഴെ കാണുന്ന ലിങ്കിൽ പൂർണ്ണ ഉദാഹരണം പരിശോധിക്കുന്നത് ഉറപ്പാക്കുക GitHub പ്രൊഫൈലിൽ.那里, നിങ്ങൾക്ക് ഇതിനെ ഇങ്ങനെ ചെയ്യാനുള്ള ഒരു ഉദാഹരണം App Router ഉപയോഗിച്ച് കണ്ടെത്താം! നിങ്ങൾക്ക് യാതൊരു പ്രശ്നവും സംഭവിച്ചാൽ, ദയവായി ബന്ധപ്പെടുക, ഞങ്ങൾ സഹായിക്കാൻ സന്തോഷത്തോടെ ഒരുങ്ങി നിന്ന്‌ പോരുന്നു.

TacoTranslate നിങ്ങളുടെ React ആപ്പ്ലിക്കേഷനുകൾ任何ഭാഷയിലും എളുപ്പത്തിൽ വൈകാതെ പ്രാദേശികമാക്കാൻ അനുവദിക്കുന്നു. ഇന്ന് തന്നെ തുടങ്ങി നിൽക്കൂ!