PolyLingo के साथ 30 मिनट से कम में Next.js ऐप का अनुवाद कैसे करें

इस ट्यूटोरियल के अंत तक आपके पास एक कार्यशील बहुभाषी Next.js App Router प्रोजेक्ट होगा: स्ट्रिंग्स को messages/en.json में निकाला गया, हर भाषा के लिए अनुवादित लोकल फाइलें, next-intl प्रत्येक रूट के लिए सही फाइल सर्व करता है, और एक सिंगल Node स्क्रिप्ट जिसे आप जब भी अपनी सामग्री बदलें, फिर से चला सकते हैं।

किसी अनुवाद प्लेटफ़ॉर्म के लिए साइन अप करने की जरूरत नहीं। भाषा-विशेष फ्लैट फीस नहीं। एक API कॉल आपके सभी लक्ष्य भाषाओं को एक साथ संभालता है।

आपको क्या चाहिए:

App Router का उपयोग करने वाला Next.js प्रोजेक्ट (Next.js 14 या 15)
Node.js 18 या बाद का संस्करण
एक मुफ्त PolyLingo खाता और API कुंजी

चरण 1: अपनी PolyLingo API कुंजी प्राप्त करें (5 मिनट)

usepolylingo.com पर एक मुफ्त खाता बनाएं। मुफ्त स्तर में प्रति माह 100,000 टोकन शामिल हैं, जो एक मध्यम आकार की लोकल फाइल को 10+ भाषाओं में कई बार अनुवाद करने के लिए पर्याप्त है।

एक बार जब आप अंदर हों, तो डैशबोर्ड में API keys पर जाएं और एक कुंजी बनाएं। आप इसे केवल एक बार पूरी तरह देख पाएंगे, इसलिए इसे तुरंत कॉपी कर लें।

इसे अपने प्रोजेक्ट में एक पर्यावरण चर के रूप में जोड़ें। इसे कभी भी संस्करण नियंत्रण में कमिट न करें और क्लाइंट-साइड कोड में कभी भी उजागर न करें:

# .env.local
POLYLINGO_API_KEY="pl_your_key_here"

आगे बढ़ने से पहले API की पहुँच सत्यापित करें:

curl -sS "https://api.usepolylingo.com/v1/health"

आपको एक छोटा JSON पेलोड मिलेगा जिसमें "status": "ok" होगा।

चरण 2: next-intl इंस्टॉल करें और रूटिंग सेट करें (10 मिनट)

लाइब्रेरी इंस्टॉल करें:

npm install next-intl

अपने प्रोजेक्ट रूट पर एक i18n.ts फाइल बनाएं। यह next-intl को बताता है कि आप कौन-कौन से लोकल सपोर्ट करते हैं और प्रत्येक अनुरोध के लिए सही संदेश फाइल कैसे लोड करें:

// i18n.ts
import { getRequestConfig } from 'next-intl/server'

export const locales = ['en', 'de', 'fr'] as const
export type Locale = (typeof locales)[number]
export const defaultLocale: Locale = 'en'

export default getRequestConfig(async ({ requestLocale }) => {
  let locale = await requestLocale
  if (!locale || !locales.includes(locale as Locale)) {
    locale = defaultLocale
  }
  return {
    locale,
    messages: (await import(`./messages/${locale}.json`)).default,
  }
})

मिडलवेयर जोड़ें जो रूट्स के साथ लोकल प्रीफिक्स लगाए:

// middleware.ts
import createMiddleware from 'next-intl/middleware'
import { locales, defaultLocale } from './i18n'

export default createMiddleware({
  locales: [...locales],
  defaultLocale,
  localePrefix: 'as-needed',
})

export const config = {
  matcher: ['/((?!api|_next|.*\\..*).*)'],
}

अपने पेज फाइलों को app/[locale]/ के अंतर्गत ले जाएं। अपने रूट लेआउट को अपडेट करें ताकि वह locale पैरामीटर प्राप्त करे और बच्चों को NextIntlClientProvider के साथ लपेटे:

// app/[locale]/layout.tsx
import { NextIntlClientProvider } from 'next-intl'
import { getMessages } from 'next-intl/server'

export default async function LocaleLayout({
  children,
  params,
}: {
  children: React.ReactNode
  params: Promise<{ locale: string }>
}) {
  const { locale } = await params
  const messages = await getMessages()
  return (
    <html lang={locale}>
      <body>
        <NextIntlClientProvider messages={messages}>
          {children}
        </NextIntlClientProvider>
      </body>
    </html>
  )
}

चरण 3: अपनी स्ट्रिंग्स को JSON संदेश फ़ाइल में निकालें (10 मिनट)

अपने प्रोजेक्ट रूट पर messages/ फ़ोल्डर बनाएं। अपनी स्रोत स्ट्रिंग्स के साथ एक en.json फ़ाइल जोड़ें। next-intl नेस्टेड की संरचना का उपयोग करता है:

{
  "Home": {
    "title": "Welcome",
    "cta": "Get started"
  }
}

अपने पेजों को अपडेट करें ताकि वे हार्डकोडेड स्ट्रिंग्स के बजाय useTranslations का उपयोग करें:

// app/[locale]/page.tsx
import { useTranslations } from 'next-intl'

export default function HomePage() {
  const t = useTranslations('Home')
  return (
    <main>
      <h1>{t('title')}</h1>
      <button type="button">{t('cta')}</button>
    </main>
  )
}

अब अनुवाद स्क्रिप्ट लिखें। यह messages/en.json पढ़ता है, इसे PolyLingo API को format: "json" के साथ भेजता है, और प्रत्येक लक्ष्य लोकल के लिए एक आउटपुट फ़ाइल लिखता है। format: "json" फ्लैग API को बताता है कि वह की संरचना को बनाए रखे और केवल स्ट्रिंग मानों का अनुवाद करे — नेस्टेड कीज़, एरेज़, और गैर-स्ट्रिंग प्रकार बिना छुए वापस आते हैं।

// scripts/translate-messages.mjs
// इसे चलाएं: node scripts/translate-messages.mjs

import fs from 'node:fs'
import path from 'node:path'

const API_KEY = process.env.POLYLINGO_API_KEY
const API_URL = (process.env.POLYLINGO_API_URL || 'https://api.usepolylingo.com/v1').replace(/\/$/, '')
const TARGETS = ['de', 'fr'] // अधिक लोकल जोड़ने के लिए इस ऐरे को बढ़ाएं

const enPath = path.join('messages', 'en.json')
const en = JSON.parse(fs.readFileSync(enPath, 'utf8'))

const res = await fetch(`${API_URL}/translate`, {
  method: 'POST',
  headers: {
    Authorization: `Bearer ${API_KEY}`,
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    content: JSON.stringify(en),
    format: 'json',
    targets: TARGETS,
    model: 'standard',
  }),
})

if (!res.ok) {
  const err = await res.text()
  throw new Error(`PolyLingo ${res.status}: ${err}`)
}

const { translations } = await res.json()

for (const locale of TARGETS) {
  const out = path.join('messages', `${locale}.json`)
  fs.writeFileSync(out, JSON.stringify(JSON.parse(translations[locale]), null, 2) + '\n')
  console.log('Wrote', out)
}

इसे चलाएं:

node scripts/translate-messages.mjs

आपको आउटपुट कुछ इस तरह दिखेगा:

Wrote messages/de.json
Wrote messages/fr.json

उन फाइलों को खोलें और जांचें। आपकी कीज़ en.json के समान होंगी। केवल स्ट्रिंग मान बदले होंगे।

चरण 4: रूट्स का स्मोक-टेस्ट करें (5 मिनट)

अपना डेवलपमेंट सर्वर शुरू करें:

npm run dev

http://localhost:3000 और http://localhost:3000/de पर जाएं। हेडिंग और बटन क्रमशः अंग्रेज़ी और जर्मन में रेंडर होने चाहिए। स्क्रिप्ट में TARGETS ऐरे और i18n.ts में locales ऐरे को बढ़ाकर और अधिक लोकल जोड़ें, फिर स्क्रिप्ट को फिर से चलाएं।

PolyLingo डैशबोर्ड में Usage के तहत अपने टोकन उपयोग की जांच करें। दो भाषाओं में अनुवादित एक छोटी लोकल फाइल के लिए आपने अपने मासिक ग्रांट में से कुछ सौ टोकन उपयोग किए होंगे।

यहां से आगे कहां जाएं

अधिक लोकल जोड़ें। स्क्रिप्ट एक ही अनुरोध भेजती है चाहे TARGETS में कितनी भी प्रविष्टियां हों। जापानी, स्पेनिश, और अरबी जोड़ने की लागत एक API कॉल है, तीन नहीं।

इसे CI में वायर करें। GitHub Actions में POLYLINGO_API_KEY को रिपॉजिटरी सीक्रेट के रूप में जोड़ें और इसे अपने बिल्ड पाइपलाइन के हिस्से के रूप में चलाएं। आपकी लोकल फाइलें स्वचालित रूप से सिंक में रहेंगी जब भी en.json बदलेगा।

अन्य फॉर्मेट का अनुवाद करें। वही स्क्रिप्ट पैटर्न Markdown डॉक्यूमेंटेशन पेज (format: "markdown") और HTML ईमेल टेम्पलेट्स (format: "html") के लिए काम करता है। API सभी मामलों में संरचना को बनाए रखता है।

बड़े प्रोजेक्ट्स के लिए बैच एंडपॉइंट का उपयोग करें। यदि आपके पास कई अलग-अलग JSON फाइलें हैं (जैसे फीचर एरिया के लिए एक-एक), तो POST /translate/batch एक ही अनुरोध में 100 आइटम तक स्वीकार करता है, प्रत्येक के अपने id और format के साथ।

इसे मुफ्त में आज़माएं

PolyLingo का मुफ्त स्तर प्रति माह 100,000 टोकन शामिल करता है। कोई क्रेडिट कार्ड आवश्यक नहीं।

curl -sS -X POST "https://api.usepolylingo.com/v1/translate" \
  -H "Authorization: Bearer $POLYLINGO_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "content": "{\"Home\":{\"title\":\"Welcome\",\"cta\":\"Get started\"}}",
    "format": "json",
    "targets": ["de", "fr", "es", "ja"]
  }'

अपनी API कुंजी प्राप्त करें