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 కీ సృష్టించండి. మేము వాటిని పర్యావరణ వేరియబుల్స్‌గా సేవ్ చేస్తాము. read కీని మేము public అని పిలుస్తాము మరియు read/write కీ secret అని పిలవబడుతుంది. ఉదాహరణకి, మీరు వాటిని మీ ప్రాజెక్ట్ రూట్‌లోని .env ఫైల్‌లో జోడించవచ్చు.

.env

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

రహస్య read/write API కీని క్లయంట్-సైడ్ ప్రొడక్షన్ వాతావరణాలకు ఎప్పుడూ లీక్ చేయకూడదు.

మేము మరో రెండు environment variablesను కూడా జోడించబోతున్నాము: 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 కీతో పరీక్షించుకునేందుకు మూసివేయబడిన, భద్రపరచబడిన staging వాతావరణాన్ని కలిగి ఉండాలని మేము సూచిస్తున్నాము, లైవ్ కావడానికి ముందే కొత్త స్ట్రింగ్స్‌ను జోడించండి. ఇది ఎవరు అయినా మీ రహస్య API కీని దొంగిలించడం నుండి మరియు అనవసరమైన, అనుబంధం లేని స్ట్రింగ్స్ జోడించడం ద్వారా మీ అనువాద ప్రాజెక్టును భారీగా పెరగకుండా నిరోధిస్తుంది.

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

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