Next.js అప్లికేషన్లో అంతర్జాతీయీకరణను ఎలా అమలుపర్చాలి, ఇది App Router ఉపయోగిస్తోంది
మీ React అనువర్తనాన్ని మరింత సులభంగా ఉపయోగించదగ్గదిగా చేయండి మరియు అంతర్జాతీయీకరణ (i18n) తో కొత్త మార్కెట్లను చేరుకోండి.
ప్రపంచం semakiniya ga more ప్రపంచీకృతమవుతుంది, వెబ్ డెవలపర్లు విభిన్న దేశాలు మరియు సంస్కృతుల నుండి వచ్చిన వినియోగదారులకు అనువైన అనువర్తనాలను తయారు చేయడం ఎంతో ముఖ్యమవుతోంది. దీని సాధనకు ముఖ్యమైన విధానాలలో ఒకటి అంతర్జాతీయీకరణ (i18n), ఇది మీ అనువర్తనాన్ని వివిధ భాషలు, కరెన్సీలు మరియు తేదీ ఆకృతులకు అనుగుణంగా మార్చుకోవడానికి సహాయం చేస్తుంది.
ఈ వ్యాసంలో, మీ React Next.js అనువర్తనానికి సర్వర్-సైడ్ రెండరింగ్తో అంతర్జాతీయీకరణను ఎలా జోడించాలో మనం పరిశీలిస్తాము. TL;DR: పూర్తి ఉదాహరణ ఇక్కడ చూడండి.
ఈ గైడ్ App Router ఉపయోగిస్తున్న Next.js అప్లికేషన్ల కొరకు.
మీరు Pages 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
ఫైలులో జోడించవచ్చు.
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_IS_PRODUCTION === 'true'
? process.env.TACOTRANSLATE_PROJECT_LOCALE
: undefined,
});
module.exports = tacoTranslate;
మేము త్వరలోనే స్వయంచాలకంగా TACOTRANSLATE_API_KEY
మరియు TACOTRANSLATE_PROJECT_LOCALE
ను నిర్వచిస్తాము.
క్లయింట్ను వేరే ఫైల్లో సృష్టించడం తర్వాత మళ్లీ ఉపయోగించుకోవడానికి సులభం అవుతుంది. getLocales
అనేది కొంత అంతర్గత లోప నిర్వహణతో కూడిన ఒక ఉపకరణ ఫంక్షన్ మాత్రమే. ఇప్పుడే /app/[locale]/tacotranslate.tsx
అనే ఫైల్ను సృష్టించండి, అక్కడ మేము TacoTranslate
ప్రొవైడర్ను అమలు చేయబోతున్నాము.
'use client';
import React, {type ReactNode} from 'react';
import {
type TranslationContextProperties,
TacoTranslate as ImportedTacoTranslate,
} from 'tacotranslate/react';
import tacoTranslateClient from '@/tacotranslate-client';
export default function TacoTranslate({
locale,
origin,
localizations,
children,
}: TranslationContextProperties & {
readonly children: ReactNode;
}) {
return (
<ImportedTacoTranslate
client={tacoTranslateClient}
locale={locale}
origin={origin}
localizations={localizations}
>
{children}
</ImportedTacoTranslate>
);
}
ఈదిగువ మెలుకువ చేయండి 'use client';
ఇది ఒక క్లయంట్ భాగం అని సూచిస్తున్నది.
సందర్భం అందించే ప్రొవైడర్ ఇప్పుడు తయారైనందున, /app/[locale]/layout.tsx
అనే పేరుతో ఒక ఫైలు సృష్టించండి, ఇది మన అప్లికేషన్ లో రూట్ లేఅవుట్. ఈ మార్గంలో Dynamic Routes ఉపయోగించే ఒక ఫోల్డర్ ఉందని గమనించండి, అక్కడ [locale]
డైనమిక్ పారామీటర్.
import React, {type ReactNode} from 'react';
import {type Locale, isRightToLeftLocaleCode} from 'tacotranslate';
import './global.css';
import tacoTranslateClient from '@/tacotranslate-client';
import TacoTranslate from './tacotranslate';
export async function generateStaticParams() {
const locales = await tacoTranslateClient.getLocales();
return locales.map((locale) => ({locale}));
}
type RootLayoutParameters = {
readonly params: Promise<{locale: Locale}>;
readonly children: ReactNode;
};
export default async function RootLayout({params, children}: RootLayoutParameters) {
const {locale} = await params;
const origin = process.env.TACOTRANSLATE_ORIGIN;
const localizations = await tacoTranslateClient.getLocalizations({
locale,
origins: [origin /* , other origins to fetch */],
});
return (
<html lang={locale} dir={isRightToLeftLocaleCode(locale) ? 'rtl' : 'ltr'}>
<body>
<TacoTranslate
locale={locale}
origin={origin}
localizations={localizations}
>
{children}
</TacoTranslate>
</body>
</html>
);
}
ఇక్కడ గమనించవలసిన మొదటి విషయం ఏమిటంటే, మేము మా Dynamic Route
పారామీటర్ [locale]
ను ఆ భాషకు అనువాదాలను తెచ్చుకోవడానికి ఉపయోగిస్తున్నాము. అదనంగా, generateStaticParams
మీ ప్రాజెక్ట్ కోసం యాక్టివేట్ చేసిన అన్ని లోకేల్ కోడ్లను ప్రీ-రెండర్ చేయడం నిర్ధారణ చేస్తున్నది.
ఇప్పుడు, మన మొదటి పేజీని రూపొందిద్దాం! /app/[locale]/page.tsx
అనే ఫైల్ సృష్టించండి.
import React from 'react';
import {Translate} from 'tacotranslate/react';
export const revalidate = 60;
export default async function Page() {
return (
<Translate string="Hello, world!" />
);
}
గమనించండి revalidate
చరివను, ఇది Next.js కు 60 సెకన్ల తర్వాత పేజీని మళ్లీ నిర్మించమని చెప్పుతుంది, మరియు మీ అనువాదాలను తాజాకల్పంగా ఉంచుతుంది.
దశ 4: సర్వర్ సైడ్ రెండరింగ్ అమలు చేయడం
TacoTranslate సర్వర్ సైడ్ రెండరింగ్ని మద్దతు ఇస్తుంది. ఇది అనువదించబడిన కంటెంట్ను తక్షణమే చూపడం ద్వారా వినియోగదారుని అనుభవాన్ని విశేషంగా మెరుగుపరుస్తుంది, మొదట అనువదించని కంటెంట్ ఒక క్షణం కనపడటం బదులు. అదనంగా, మేము క్లయింట్ పై నెట్వర్క్ అభ్యర్థనలను తప్పించుకోవచ్చు, ఎందుకంటే వినియోగదారు చూస్తున్న పేజీకి కావలసిన అనువాదాలు మాకు ఇప్పటికే ఉన్నాయి.
సర్వర్ సైడ్ రెండరింగ్ సెటప్ చేయడానికి, /next.config.js
ను సృష్టించండి లేదా మార్చండి:
const withTacoTranslate = require('tacotranslate/next/config').default;
const tacoTranslateClient = require('./tacotranslate-client');
module.exports = async () => {
const config = await withTacoTranslate(
{},
{
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'),
}
);
// NOTE: Remove i18n from config when using the app router
return {...config, i18n: undefined};
};
మీ సెటప్కు అనుగుణంగా isProduction
చెక్ను మారుస్తారు. అయితే true
అయితే, TacoTranslate పబ్లిక్ API కీని ప్రదర్శిస్తుంది. మేము లోకల్, పరీక్ష లేదా స్టేజింగ్ పరిసరంలో ఉన్నట్లయితే (isProduction
is false
), కొత్త స్ట్రింగ్స్ అనువాదానికి పంపబడుతున్నాయని నిర్ధారించడానికి సీక్రెట్ read/write
API కీని ఉపయోగిస్తాము.
రూటింగ్ మరియు రీడైరెక్షన్ను అనుకున్న విధంగా పనిచేయించడానికి, మనం /middleware.ts
అనే ఫైల్ను సృష్టించాలి. Middleware ఉపయోగించి, వినియోగదారులను వారి ఇష్టమైన భాషలో చూపబడే పేజీలకు మళ్లించవచ్చు.
import {type NextRequest} from 'next/server';
import {middleware as tacoTranslateMiddleware} from 'tacotranslate/next';
import tacoTranslate from '@/tacotranslate-client';
export const config = {
matcher: ['/((?!api|_next|favicon.ico).*)'],
};
export async function middleware(request: NextRequest) {
return tacoTranslateMiddleware(tacoTranslate, request);
}
matcher
ను Next.js Middleware డాక్యుమెంటేషన్ ప్రకారం సెట్ చేయడం తప్పనిసరి.
క్లయింట్లో, మీరు locale
కుకీని మార్చి యూజర్ ప్రాధాన్యత కలిగిన భాషను మార్చవచ్చు. దయచేసి పూర్తి ఉదాహరణ కోడ్ను ఎలా చేయాలో తెలుసుకోవడానికి చూడండి!
దశ 5: మోపండి మరియు పరీక్షించండి!
మనం పూర్తయ్యాము! మీరు Translate
కాంపోనెంట్లో ఏదైనా స్ట్రింగ్స్ను జోడించినప్పుడు, మీ React అప్లికేషన్ స్వయంచాలకంగా అనువదించబడుతుంది. గమనించండి, API కీపై read/write
అనుమతులు ఉన్న వాతావరణాల్లోనే కొత్త స్ట్రింగ్స్ను అనువదించడానికి సృష్టించగలుగుతారు. మేము సిఫార్సు చేస్తున్నది, మీరు ప్రొడక్షన్ అప్లికేషన్ను అలాంటి API కీతో పరీక్షించేందుకు ఒక మూసివేసిన మరియు భద్రత కలిగిన స్టేజింగ్ వాతావరణం కలిగి ఉండాలి, కొత్త స్ట్రింగ్స్ను లైవ్కు వెళ్లేముందు జోడించండి. ఇది ఎవరైనా మీ రహస్య API కీని దొంగతనం చేయకుండా తಡೆಯగా, మీ అనువాద ప్రాజెక్టును అనిశ్చితమైన, సంబంధం లేని కొత్త స్ట్రింగ్స్తో అనవసరంగా పెంచకుండా చేయడం జరుగుతుంది.
మా GitHub ప్రొఫైల్లోని పూర్తిగా ఉదాహరణను చూసేందుకు తప్పకుండా చూడండి. అక్కడ, మీరు Pages Router ఉపయోగించి దీన్ని ఎలా చేయాలో కూడా ఒక ఉదాహరణను కనుగొనగలరు! మీరు ఏదైనా సమస్యలను ఎదుర్కొనినట్లయితే, దయచేసి మమ్మల్ని సంప్రదించండి, మరియు మేము సంతోషంగా సహాయం చేస్తాము.
TacoTranslate మీ React అప్లికేషన్లను ఏ భాషలోనైనా త్వరగా మరియు ఆటోమేటిక్గా లోకలైజ్ చేయడానికి అనుమతిస్తుంది. ఇప్పుడు ప్రారంభించండి!