Pages Router ഉപയോഗിക്കുന്ന ഒരു Next.js അപ്ലിക്കേഷനിൽ അന്താരാഷ്ട്രീകരണം എങ്ങനെ നടപ്പിലാക്കാം

നിങ്ങളുടെ React ആപ്ലിക്കേഷൻ കൂടുതൽ ആക്‌സസ് ചെയ്യാവുന്നതാക്കുകയും അന്താരാഷ്ട്രവൽക്കരണത്തിലൂടെ (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 ഫയലിലേക്കു ചേർക്കാം.

.env

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

ക്ലയന്റ് സൈഡ് പ്രൊഡക്ഷൻ ഏർപ്പാടുകളിൽ സീക്രട്ട് read/write API കീ ഒന്നും പ്രസരിപ്പിക്കരുത്.

നാം രണ്ട് പരിസ്ഥിതി വ്യത്യസ്തങ്ങൾ കൂടി ചേർക്കും: TACOTRANSLATE_DEFAULT_LOCALE жана TACOTRANSLATE_ORIGIN.

TACOTRANSLATE_DEFAULT_LOCALE: ഡിഫോൾട്ട് fallback ലോക്കൽ കോഡ്. ഈ ഉദാഹരണത്തിൽ, ഇംഗ്ലീഷിനായി en ആയി സജ്ജീകരിക്കും.
TACOTRANSLATE_ORIGIN: നിങ്ങളുടെ സ്ട്രിംഗുകൾ സൂക്ഷിക്കുന്ന “ഫോൾഡർ”, ഉദാഹരണത്തിന് നിങ്ങളുടെ വെബ്സൈറ്റ് URL. ഇവിടെയാണ് origins haqqında കൂടുതൽ വായിക്കുക.

.env

TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com

പടി 3: TacoTranslate സെറ്റപ്പ് ചെയ്യൽ

TacoTranslate നിങ്ങളുടെ അപ്ലിക്കേഷനുമായി സംയോജിപ്പിക്കാൻ, നിങ്ങൾക്ക് മുമ്പ് നൽകിയ API കീകൾ ഉപയോഗിച്ച് ഒരു ക്ലയന്റ് സൃഷ്ടിക്കാൻ ആവശ്യമുണ്ട്. ഉദാഹരണത്തിന്, /tacotranslate-client.js എന്ന ഒരു ഫയൽ സൃഷ്ടിക്കുക.

/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 പ്രൊവൈഡറെ ചേർക്കും.

/pages/_app.tsx

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 സൃഷ്‌ടിക്കുകയോ മാറ്റങ്ങളുണ്ടാക്കുകയോ ചെയ്യുന്നതിലൂടെ ആണ്.

/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 ഉപയോഗിക്കും.

ഈ ഫങ്ഷനുകൾക്ക് മൂന്ന് argumentoകൾ ആവശ്യമാണ്: ഒന്ന് Next.js Static Props Context ഒബ്ജക്ട്, TacoTranslate-യ്ക്ക് വേണ്ടി concertation, കൂടാതെ ഐച്ഛികമായ Next.js ഗുണങ്ങൾ. ദയവായി ശ്രദ്ധിക്കുക revalidate getTacoTranslateStaticProps ല്‍റെ ഡിഫോൾട്ട് മൂല്യം 60 ആയി സജ്ജീകരിച്ചിരിക്കുന്നു, അതിനാൽ നിങ്ങളുടെ പരിഭാഷകൾ പുതിയതായിരിക്കും.

ഈ ഫങ്ഷനുകളിൽ ഏത് പേജിലും ഉപയോഗിക്കാൻ, നമുക്ക് ധരിക്കാം, നിങ്ങൾക്ക് താഴെനിലവിലുള്ളപോലെ ഒരു പേജ് ഫയൽ ഉള്ളൂ, /pages/hello-world.tsx.

/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 കംപോണന്റിലേക്ക് ചേര്‍ക്കുമ്പോള്‍ ഇനി നിങ്ങളുടെ React ആപ്ലിക്കേഷന്‍ സ്വയംവത്യാസമായി തര്‍ജ്ജമ ചെയ്യപ്പെടും. API കീയില്‍ read/write അനുവാദമുള്ള മാത്രം പരിസ്ഥിതികളിലാണ് പുതിയ തര്‍ജ്ജമ പദങ്ങള്‍ സൃഷ്ടിക്കാന്‍ സാധിക്കുക. പ്രൊഡക്ഷന്‍ ആപ്ലിക്കേഷന്‍ അവസാനമാകുന്നതിന് മുമ്പ് പുതിയ പദങ്ങള്‍ ചേര്‍ക്കുന്നതിനുള്ള പരീക്ഷണങ്ങള്‍ നടത്താന്‍ കഴിവുള്ള, അടച്ചും സുരക്ഷിതവും ആയ staging പരിസ്ഥിതി ഉണ്ടായിരിക്കണമെന്ന് ഞങ്ങള്‍ ശുപാര്‍ശ ചെയ്യുന്നു. ഇതു നിങ്ങള്‍ നിങ്ങളുടെ രഹസ്യ API കീ കവര്‍ന്നെടുത്തിത്തോല്‍പ്പിക്കുന്നതും, പുതിയ അവ്യക്തമായ സ്‌ട്രിംഗ്‌സുകള്‍ ചേര്‍ന്നുകൊണ്ടുള്ള പരിഭാഷാ പ്രോജക്ട് അനാവശ്യമായി വലുതാക്കപ്പെടുന്നതും തടയുന്നതാണ്.