Next.js యాప్‌లలో అంతర్జాతీయీకరణ (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 ఖాతాను సృష్టించండి

మODULE ఇన్స్టాల్ చేసుకున్న తర్వాత, ఇప్పుడు మీ TacoTranslate ఖాతాను, ఒక అనువాద ప్రాజెక్టును, మరియు సంబంధిత API కీలు సృష్టించాల్సిన సమయం వచ్చింది. ఇక్కడ ఖాతా సృష్టించండి. ఇది निशुल्कం, మరియు మీకు క్రెడిట్ కార్డు జోడించాల్సిన అవసరం లేదు.

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

టాకోట్రాన్స్లేట్ను మీ అప్లికేషన్తో ఇంటిగ్రేట్ చేయడానికి, మీరు మునుపటి నుండి 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: విస్తరించండి మరియు పరీక్షించండి!

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

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

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