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

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

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 അപ്ലിക്കേഷൻ lediglich പിന്തുണയുള്ള ഭാഷകളുടെ പട്ടികയൊപ്പമാണ് ക്രമീകരിച്ചിരിക്കുന്നത്. അടുത്തത് ചെയ്യാനിരിക്കുന്നത് നിങ്ങളുടെ എല്ലാ പേജുകൾക്കും തർജ്ജമകൾ വായിക്കലാണ്. അതിനായി, നിങ്ങളുടെ ആവശ്യാനുസരണം 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: പ്രവർത്തനത്തിലാക്കുക এবং പരീക്ഷിക്കുക!

ഞങ്ങൾ പൂർത്തിയായി! നിങ്ങൾ Translate കമ്പോണന്റിലേക്ക് ഏതെങ്കിലും സ്ട്രിംഗുകൾ ചേർക്കുമ്പോൾ നിങ്ങളുടെ React അപ്ലിക്കേഷൻ ഇനി സ്വയം തർജ്ജമ ചെയ്യപ്പെടും. ശ്രദ്ധിക്കുക: API കീയിൽ read/write അനുവാദം ഉള്ള പരിസ്ഥിതികളിൽ മാത്രം പുതിയ തർജ്ജമ ചെയ്യേണ്ട സ്ട്രിംഗുകൾ സൃഷ്ടിക്കാൻ സാധിക്കും. ഇത്തരം ഒരു API കീ ഉപയോഗിച്ച് നിങ്ങളുടെ പ്രൊഡക്ഷൻ അപ്ലിക്കേഷൻ പരീക്ഷിക്കാൻ, ലൈവാകുന്നതിന് മുൻപ് പുതിയ സ്ട്രിംഗുകൾ ചേർക്കുന്നതിനുള്ള അടച്ചും സുരക്ഷിതവുമായ സ്റ്റേജിംഗ് പരിസ്ഥിതി നിക്ഷേപിക്കാൻ ഞങ്ങൾ ശുപാർശ ചെയ്യുന്നു. ഇത് ആരും ആരും നിങ്ങളുടെ രഹസ്യ API കീ മോഷ്ടിക്കാൻ കഴിയാതാക്കും, കൂടാതെ പുതിയ, ബന്ധപ്പെട്ടിട്ടില്ലാത്ത സ്ട്രിംഗുകൾ ചേർത്ത് നിങ്ങളുടെ തർജ്ജുമാ പ്രോജക്ട് അമിതമായി വളരുന്നത് തടയാൻ സഹായിക്കും.

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

TacoTranslate നിങ്ങളുടെ React ആപ്ലിക്കേഷനുകൾ 75-ലധികം ഭാഷകളിലേക്ക്‌യും അവരിൽ നിന്നുമുള്ളതായും സ്വയം ലോക്കലൈസ് ചെയ്യാൻ സഹായിക്കുന്നു. ഇന്ന് തന്നെ ആരംഭിക്കുക!