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

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

ప్రపంచం semakin గ్లోబలైగా మారుతుండగా, వెబ్ డెవలపర్స్‌కు వివిధ దేశాలు మరియు సాంస్కృతికాల నుంచి వచ్చిన వినియోగదారులను చేరవేయగల అప్లికేషన్లను నిర్మించడం మరింత కీలకమవుతోంది. దీన్ని సాధించడానికి ఒక ముఖ్యమైన మార్గం అంతర్జాతీయీకరణ (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 keys ట్యాబ్‌కు నావిగేట్ చేయండి. ఒక read కీని, మరియు ఒక read/write కీని సృష్టించండి. వాటిని వాతావరణ చరాలుగా (environment variables) సేవ్ చేస్తాము. 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. ఇక్కడ origins గురించి ఎక్కువ చదవండి.

.env

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

దశ 3: TacoTranslate సెటప్ చేయడం

To integrate TacoTranslate with your application, you’ll need to create a client using the API keys from earlier. For example, create a file named /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 కీని surface చేస్తుంది. మనం لوకల్, టెస్ట్, లేదా స్టేజింగ్ ఎన్విరాన్‌మెంట్ లో ఉంటే (isProduction is false), కొత్త స్ట్రింగ్‌లు అనువాదానికి పంపబడేలా గుప్త read/write API కీని ఉపయోగిస్తాం.

ఇప్పటివరకు, మేము Next.js అనువర్తనాన్ని మద్దతు భాషల జాబితాతో మాత్రమే సెట్ చేసాము. తరువాత మేము చేసేది మీ అన్ని పేజీలకు అనువాదాలను తీసుకురావడం. అలా చేయడానికి, మీరు మీ అవసరాల ఆధారంగా getTacoTranslateStaticProps లేదా getTacoTranslateServerSideProps ఉపయోగిస్తారు.

ఈ విధులు మూడు వాదనలను తీసుకుంటాయి: ఒక Next.js Static Props Context వస్తువు, టాకోట్రాన్స్లేట్ కోసం కాన్ఫిగరేషన్ మరియు ఆప్షనల్ 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!"/>
}

Step 5: తెరచి పరీక్షించండి!

మేము పూర్తయినాము! మీరు Translate భాగంలో ఏదైనా స్ట్రింగ్స్‌ను జత చేయగానే మీ React అప్లికేషన్ స్వయంచాలకంగా అనువదించబడుతుంది. API కీలపై read/write అనుమతులు ఉన్నే పరిసరాలు మాత్రమే కొత్త స్ట్రింగ్స్‌ను అనువదించడానికి సృష్టించగలవు అని గమనించండి. మీరు ఒక మూసివేసిన మరియు భద్రపరచబడిన స్టేజింగ్ పరిసరాన్ని కలిగి ఉండాలని మేము సిఫారసు చేస్తున్నాము, అక్కడ మీరు ఆ ప్రొడక్షన్ అప్లికేషన్‌ను అలాంటి API కీతో పరీక్షించవచ్చు, లైవ్‌కు వెళ్లే ముందు కొత్త స్ట్రింగ్స్‌ను జత చేస్తూ. ఇది మీ గోప్యమైన API కీనిని ఎవ్వరూ దొంగిలించకుండా నిరోధిస్తుంది, మరియు అనూహ్య, సంబంధం లేని స్ట్రింగ్స్ జోడించడం వల్ల మీ అనువాద ప్రాజెక్టును పెదవివ్వకుండా చేస్తుంది.

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

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