Skip to content

ইন্টারন্যাশনালাইজেশন

তোমার অ্যাপে বহু-ভাষা সাপোর্ট যোগ করো। সম্পাদকীয় লোকালাইজেশনের জন্য Proyecta Content API ব্যবহার করো, অথবা AI-কে সরাসরি কোডে একটি i18n framework সংযুক্ত করতে বলো।

Proyecta তোমার তৈরি অ্যাপগুলো ইন্টারন্যাশনালাইজ করার জন্য দুটি পরিপূরক পদ্ধতি সাপোর্ট করে:

  1. Proyecta Content API-এর মাধ্যমে কন্টেন্ট লোকালাইজেশন — সম্পাদকীয় কন্টেন্টের জন্য (ব্লগ পোস্ট, FAQ, মার্কেটিং কপি) যেগুলো একাধিক ভাষায় অনুবাদ করা দরকার
  2. একটি ট্রান্সলেশন framework-এর মাধ্যমে কোড-লেভেল i18n — UI স্ট্রিং, তারিখ, মুদ্রা এবং runtime locale switching-এর জন্য

দুটিই এখনই কাজ করে। কোনটি তোমার দরকার সেটা নির্ভর করে তুমি কী অনুবাদ করছ তার উপর।

Builder হিসেবে Proyecta নিজেই ২৪টি locale নিয়ে আসে, তাই প্রোডাক্টটি i18n-এ দক্ষ। তুমি এর ভেতরে যে অ্যাপগুলো তৈরি করো সেগুলোতেও একই প্যাটার্ন প্রযোজ্য।

অপশন ১: কন্টেন্ট লোকালাইজেশন (Proyecta Content API)

Section titled “অপশন ১: কন্টেন্ট লোকালাইজেশন (Proyecta Content API)”

যদি তুমি একটি কন্টেন্ট-ভারী সাইট তৈরি করছ — ব্লগ, নলেজ বেস, মার্কেটিং পেজ, প্রোডাক্ট ক্যাটালগ — তাহলে বিল্ট-ইন locale সাপোর্ট ব্যবহার করো। AI-কে বলো তুমি কোন কোন ভাষা সাপোর্ট করো ("Make the site available in English, Spanish and French"), সে তোমার হয়ে সেগুলো রেজিস্টার করে দেবে, ডিফল্ট হিসেবে English রেখে। তারপর ভিজিটরের ভাষায় কন্টেন্ট পড়ো।

frontend-এ, টেমপ্লেটের typed কন্টেন্ট hooks তোমার জন্য লোকালাইজড ফিল্ড resolve করে — ভিজিটরের সক্রিয় locale পাস করো এবং প্রতিটি localized ফিল্ড একটি একক অনুবাদিত মান হিসেবে ফিরে আসে:

import { useCollection, useEntry } from '@/hooks/useContent';
import { useTranslation } from 'react-i18next';
function Blog({ slug }: { slug: string }) {
const { i18n } = useTranslation();
// List a collection in the current locale
const { data: posts } = useCollection('posts', { locale: i18n.language });
// Or read one entry by slug in the current locale
const { data: post } = useEntry('posts', slug, { locale: i18n.language });
// ...render posts / post
}

পর্দার পেছনে CMS একটি fallback chain অনুসরণ করে — অনুরোধ করা locale → তার কনফিগার করা fallback-গুলো → ডিফল্ট locale — এবং প্রতিটি entry-তে আসলে যে কোডটি serve করা হয়েছে সেটি localeResolved হিসেবে রিপোর্ট করে। একক-ভাষার সাইটে locale বাদ দিলে ফিল্ডগুলো raw মান হিসেবে ফিরে আসে।

এটি সঠিক সমাধান যখন:

  • কোড লেখেন না এমন সম্পাদকদের কন্টেন্ট অনুবাদ করতে হবে
  • তুমি চাও অনুবাদগুলো versionable হোক
  • তোমার locale-নির্দিষ্ট publishing দরকার (scheduled publishing শীঘ্রই আসছে — এন্ট্রিগুলো বর্তমানে API-এর মাধ্যমে ম্যানুয়াল publish প্রয়োজন)

সম্পূর্ণ Content API-এর জন্য কন্টেন্ট ম্যানেজমেন্ট দেখো।

অপশন ২: কোড-লেভেল i18n framework

Section titled “অপশন ২: কোড-লেভেল i18n framework”

UI স্ট্রিংয়ের জন্য — লেবেল, বাটন, এরর মেসেজ, তারিখ, মুদ্রা — AI-কে সরাসরি তোমার প্রজেক্টে একটি i18n framework সংযুক্ত করতে বলো:

Add internationalization to my app.
Support English, Spanish, French, and Arabic.
Add message catalogs in src/locales/.
Add a language switcher in the header.
Use locale-prefixed URLs like /en/about and /es/about.
Make sure RTL layout works correctly for Arabic.

AI করবে:

  1. একটি framework বেছে নেবে — AI i18next এবং react-i18next ব্যবহার করে (Proyecta-এর স্ট্যান্ডার্ড)
  2. catalog ফাইল তৈরি করবে src/locales/-এ (প্রতিটি ভাষার জন্য একটি JSON)
  3. টেক্সট wrap করবে t() কলে (react-i18next-এর useTranslation hook থেকে)
  4. একটি language switcher কম্পোনেন্ট যোগ করবে
  5. locale prefix সহ URL routing সংযুক্ত করবে
  6. RTL লেআউট হ্যান্ডেল করবে (dir="rtl") আরবি, হিব্রু ইত্যাদির জন্য
  7. locale অনুযায়ী সংখ্যা, তারিখ এবং মুদ্রা ফরম্যাট করবে

AI দিয়ে অটো-ট্রান্সলেট

Section titled “AI দিয়ে অটো-ট্রান্সলেট”

তোমার বেস ভাষা প্রস্তুত হয়ে গেলে, AI অন্য catalog ফাইলগুলো তৈরি করতে দারুণ কাজে আসে:

  • "Translate every string in src/locales/en.json into Spanish, French, German, and Japanese. Use natural, idiomatic phrasing — don't translate brand names."
  • "My app is fully built in English. Add Spanish translations for everything and an es/ route prefix."

গুরুত্বপূর্ণ কন্টেন্টের জন্য (আইনি কপি, চিকিৎসা, অর্থনীতি), ship করার আগে একজন মানব অনুবাদক দিয়ে AI-এর আউটপুট রিভিউ করিয়ে নাও।

উভয় পদ্ধতি একসাথে ব্যবহার

Section titled “উভয় পদ্ধতি একসাথে ব্যবহার”

বেশিরভাগ বাস্তব অ্যাপ উভয়ই ব্যবহার করে: UI chrome-এর জন্য কোড-লেভেল i18n (বাটন, এরর, নেভিগেশন), এবং সম্পাদকীয় কন্টেন্টের জন্য Content API (আর্টিকেল, প্রোডাক্ট বিবরণ)। এগুলো পরিষ্কারভাবে সহাবস্থান করে — তোমার i18n framework build সময়ে catalog ফাইলগুলো হ্যান্ডেল করে, Content API runtime-এ লোকালাইজড entry serve করে।

  1. আগে বেস ভাষা বেছে নাও এবং কপি চূড়ান্ত করো। একটি পরিবর্তনশীল লক্ষ্য অনুবাদ করা কষ্টকর।
  2. অনুবাদ একসাথে করো। চলতে চলতে অনুবাদ করো না — কোনো ফিচার স্থিতিশীল হওয়া পর্যন্ত অপেক্ষা করো।
  3. RTL আগেভাগে টেস্ট করো যদি তুমি আরবি বা হিব্রু সাপোর্ট করো। RTL বাগ লুকিয়ে থাকে যতক্ষণ না তুমি সত্যিই দেখো।
  4. <html>-এ lang এবং dir অন্তর্ভুক্ত করো। ব্রাউজার এবং স্ক্রিন রিডার এটির উপর নির্ভর করে।
  5. ফরম্যাটিংয়ের জন্য Intl ব্যবহার করো। তারিখ বা মুদ্রা ফরম্যাটিং নিজে হাতে করো না — Intl.DateTimeFormat, Intl.NumberFormat ব্যবহার করো।
  • In-builder locale management UI — locale বেছে নাও, ট্রান্সলেশন কভারেজ দেখো, Proyecta ছাড়া না গিয়েই catalog সম্পাদনা করো
  • নতুন স্ট্রিংয়ের জন্য সেভ করার সময় অটো-ট্রান্সলেট
  • i18n-ready প্রজেক্ট টেমপ্লেট যেখানে framework আগে থেকেই সংযুক্ত থাকবে