Next.js యాప్‌లలో అంతర్జాతీయీకరణ (i18n) కోసం ఉత్తమ పరిష్కారం

ఇది ఎలా పనిచేస్తుంది

ప్రపంచం మరింత అంతర్జాతీయమవుతున్నందున, వీవ‌సైట్ల అభివృద్ధికారులు विभिन्न దేశాల మరియు సాంస్కృతిక నేపథ్యాల నుండి వచ్చే వినియోగదారులను అనుకూలంగా సేవలందించే అనువర్తనాలను తయారుచేయడం మరింత ముఖ్యమవుతోంది. దీన్ని సాధించేందుకు ముఖ్యమైన మార్గాలలో ఒకటి అంతర్జాతీయీకరణ (i18n), ఇది మీ అనువర్తనాన్ని వివిధ భాషల, కరెన్సీల మరియు తేదీ ఫార్మాట్లకు అనుకూలంగా మార్చుకునేందుకు సహాయపడుతుంది.

ఈ ట్యూటోరియల్‌లో, మనం మీ React Next.js అనువర్తనానికి సర్వర్ సైడ్ రేండరింగ్‌తో అంతర్జాతీయీకరణ ఎలా జోడించాలో పరిశీలించబోతున్నాం. TL;DR: పూర్తి ఉదాహరణను ఇక్కడ చూడండి.

ఈ గైడ్ Pages Router ఉపయోగిస్తున్న Next.js అప్లికేషన్ల కోసం ఉద్దేశించబడింది.
మీరు App Router ఉపయోగిస్తున్నట్లయితే, దయచేసి బదులుగా ఈ గైడ్‌ని చూడండి.

దశ 1: ఒక i18n లైబ్రరీని ఇన్‌స్టాల్ చేయండి

మీ Next.js అప్లికేషన్‌లో అంతర్జాతీయీకరణను అమలు చేయడానికి, మన akọkọగా ఒక 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 ఫైల్లో చేర్చవచ్చు.

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!"/>;
}

ఇప్పుడు మీరు Translate కాంపోనెంట్‌ను ఉపయోగించి మీ అన్ని React కాంపోనెంట్లలో స్ట్రింగ్స్‌ను అనువదించగలుగుతారు.

import {Translate} from 'tacotranslate/react';

function Component() {
	return <Translate string="Hello, world!"/>
}

స్టెప్ 5: డిప్లాయ్ చేసి పరీక్షించండి!

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

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

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