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

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

ఈ పరిచయ వ్యాసంలో, server side renderingతో మీ 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 అని పిలుస్తాము. ఉదాహరణకి, మీరు వాటిని మీ ప్రాజెక్ట్ 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 అయితే, 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 లాంటి ఒక పేజీ ఫైల్ ఉంది అనుకుందాం.

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: డిప్లాయ్ చేసి పరీక్షించండి!

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

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

TacoTranslate మీ React అనువర్తనాలను ఏ భాషకి సరిపడేలా త్వరగా ఆటోమేటిక్‌గా స్థానికీకరించడానికి సహాయపడుతుంది. ఇന്ന് ప్రారంభించండి!