← ব্লগে ফিরে যান
Terminal output showing a translation script writing de.json and fr.json, alongside a folder tree and a browser rendering the German locale route.

কিভাবে ৩০ মিনিটের মধ্যে PolyLingo দিয়ে একটি Next.js অ্যাপ অনুবাদ করবেন

By Robert

PolyLingo দিয়ে ৩০ মিনিটের মধ্যে 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 কী

ধাপ ১: আপনার PolyLingo API কী পান (৫ মিনিট)

usepolylingo.com এ একটি ফ্রি অ্যাকাউন্ট তৈরি করুন। ফ্রি টিয়ার প্রতি মাসে ১০০,০০০ টোকেন অন্তর্ভুক্ত করে, যা একটি মাঝারি আকারের লোকেল ফাইল ১০+ ভাষায় কয়েকবার অনুবাদ করার জন্য যথেষ্ট।

একবার লগইন করলে, ড্যাশবোর্ডে API keys এ যান এবং একটি কী তৈরি করুন। আপনি সম্পূর্ণ মান একবারই দেখতে পাবেন, তাই তা অবিলম্বে কপি করুন।

এটি আপনার প্রকল্পে একটি পরিবেশ ভেরিয়েবল হিসেবে যোগ করুন। কখনোই এটি ভার্সন কন্ট্রোলে কমিট করবেন না এবং ক্লায়েন্ট-সাইড কোডে প্রকাশ করবেন না:

# .env.local
POLYLINGO_API_KEY="pl_your_key_here"

অগ্রসর হওয়ার আগে API অ্যাক্সেসযোগ্য কিনা যাচাই করুন:

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

আপনি একটি ছোট JSON পে-লোড পাবেন যার মধ্যে থাকবে "status": "ok"।

ধাপ ২: next-intl ইনস্টল করুন এবং রাউটিং সেটআপ করুন (১০ মিনিট)

লাইব্রেরিটি ইনস্টল করুন:

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]/ এর নিচে সরান। আপনার রুট লেআউট আপডেট করুন যাতে লোকেল প্যারাম গ্রহণ করে এবং 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>
  )
}

ধাপ ৩: আপনার স্ট্রিংগুলো JSON মেসেজ ফাইলে বের করুন (১০ মিনিট)

আপনার প্রকল্পের রুটে একটি 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
// Run with: 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'] // extend this array to add more locales

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 এর মতোই থাকবে। শুধুমাত্র স্ট্রিং মানগুলো পরিবর্তিত হবে।

ধাপ ৪: রুটগুলো দ্রুত পরীক্ষা করুন (৫ মিনিট)

আপনার ডেভ সার্ভার চালু করুন:

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 একক অনুরোধে ১০০টি আইটেম পর্যন্ত গ্রহণ করে, প্রতিটির নিজস্ব id এবং format থাকে।

ফ্রি ট্রাই করুন

PolyLingo এর ফ্রি টিয়ার প্রতি মাসে ১০০,০০০ টোকেন অন্তর্ভুক্ত করে। কোনো ক্রেডিট কার্ডের প্রয়োজন নেই।

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 কী পান