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 కీ సృష్టించండి. వీటిని పర్యావరణ ఛరాలు (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: డిఫాల్ట్ fallback లోకేల్ కోడ్. ఈ ఉదాహరణలో, మేము దీన్ని ఆంగ్లానికి 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 కీనీ దొంగిలించకుండా నిరోధిస్తుంది, మరియు అనవసరమైన కొత్త స్ట్రింగ్స్ జోడించడం వల్ల మీ అనువాద ప్రాజెక్ట్‌ను అవసరంలేదు విధంగా పెంచవలసి రావడం నుండి కాపాడుతుంది.

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

TacoTranslate మీ React అప్లికేషన్స్‌ను 75 కన్నా ఎక్కువ భాషలలో వేగంగా ఆటోమేటిక్‌గా స్థానీకరణ (localize) చేయడానికి సహాయం చేస్తుంది. ఇప్పుడే ప్రారంభించండి!