Pages Router ఉపయోగించే Next.js అప్లికేషన్‌లో అంతర్జాతీయతను ఎలా అమలు చేయాలి

మీ React అప్లికేషన్‌ను మరింత సౌకర్యవంతంగా మార్చండి మరియు అంతర్జాతీయీకరణ (i18n) తో కొత్త మార్కెట్లను చేరుకోండి.

ప్రపంచం మరింత గ్లోబలైజ్డ్ అవుతున్న కొద్దీ, వెబ్ డెవలపర్లు విభిన్న దేశాలు మరియు సంస్కృతుల నుంచి వినియోగదారులను తీరుస్తూ అప్లికేషన్లను తయారుచేసే విషయం మరింత ముఖ్యమవుతోంది. దీనిని సాధించడానికి ప్రధాన మార్గాల్లో ఒకటిగా అంతర్జాతీయీకరణ (i18n) ఉంది, ఇది మీ అప్లికేషన్‌ను వివిధ భాషలు, కరెన్సీలు, మరియు త-del-formatలకు అనుగుణంగా మార్చడానికి అనుమతిస్తుంది.

ఈ పాఠంలో, మేము మీ 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: డిఫాల్ట్ ఫాల్‌బ్యాక్ లోకేల్ కోడ్. ఈ ఉదాహరణలో, మేము దీన్ని en అనగా ఆంగ్లంగా సెట్ చేస్తాము.
TACOTRANSLATE_ORIGIN: మీ స్ట్రింగ్స్ నిల్వ చేయబడే "ఫోల్డర్", ఉదాహరణకు మీ వెబ్‌సైట్ URL. ఇక్కడ ఆ రకాల గురించి మరింత చదవండి.

.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 వాడవచ్చు.

ఈ ఫంక్షన్లు మూడు ఆర్గ్యుమెంట్లను తీసుకుంటాయి: ఒకటి Next.js Static Props Context ఆబ్జెక్ట్, TacoTranslate కోసం కాన్ఫిగరేషన్, మరియు ఐచ్ఛిక Next.js ప్రాపర్టీలు. getTacoTranslateStaticProps లో revalidate డిఫాల్టుగా 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 అనుమతులు కలిగిన పర్యావరణాలలో మాత్రమే కొత్త స్ట్రింగులను అనువదించడానికి సృష్టించవచ్చు. మేము మీరు ఒక మూసివేసిన మరియు సురక్షిత స్టేజింగ్ పర్యావరణాన్ని కలిగి ఉండాలని సిఫార్సు చేస్తాము, అక్కడ మీరు మీ ప్రొడక్షన్ అప్లికేషన్‌ను అలాంటి API కీతో పరీక్షించవచ్చు, लाइवకి వెళ్లేముందు కొత్త స్ట్రింగులను జత చేయవచ్చు. ఇది ఎవరికైనా మీ రహస్య API కీని దొంగిలించటం నుండి నివారిస్తుంది, మరియు ఆడివే, సంబంధం లేని కొత్త స్ట్రింగులను జతచేసి మీ అనువాద ప్రాజెక్టును ఉత్కృష్టంగా పెంచే అవకాశాన్ని తగ్గిస్తుంది.

మాకు గిట్హబ్ ప్రొఫైల్‌లో ఉన్న పూర్తి ఉదాహరణను చూసి మరచిపోకండి. అక్కడ మీరు App Router ఉపయోగించుకుని ఇలా చేయగలిగే ఒక ఉదాహరణను కూడా కనుగొంటారు! మీరు సమస్య ఎదురైనప్పుడు, మాకు సంప్రదించండి, మేము మీకు సంతోషంగా సహాయం చేస్తాము.

TacoTranslate మీ React అనువర్తనాలను ఆటోమేటిక్‌గా 75కి పైగా భాషలలో త్వరగా లోకలైజ్ చేయడానికి సహాయపడుతుంది. ఈరోజే ప్రారంభించండి!