আপনার অ্যাপ বা ওয়েবসাইটে কীভাবে একাধিক ভাষা যোগ করবেন

অ্যাপে একাধিক ভাষা যোগ করতে হলে ইন্টারফেসের প্রতিটি লেখা অনুবাদ ফাইলে (প্রতি ভাষার জন্য একটি করে) সরিয়ে নিন, একটি i18n লাইব্রেরি দিয়ে সেগুলো লোড করুন, এবং একটি ভাষা বদলানোর সুইচ যোগ করুন যা ব্যবহারকারীর পছন্দ মনে রাখে। সার্চ ইঞ্জিনে খুঁজে পাওয়া দরকার এমন পাবলিক পেজের জন্য প্রতি ভাষার নিজস্ব URL দিন, যেমন /fr/, আর hreflang ট্যাগ দিয়ে সংস্করণগুলো একে অপরের সাথে যুক্ত করুন। এরপর সেই অংশগুলো দেখুন যেগুলো সাধারণত বাদ পড়ে: তারিখ, সংখ্যা ও মুদ্রা, কিছু ভাষায় দীর্ঘ লেখা, ডান-থেকে-বামে লেখা ভাষা এবং ডাটাবেসে রাখা কন্টেন্ট।

যে শব্দগুলো আপনি শুনবেন

• Internationalisation (i18n): কোডকে যেকোনো ভাষার জন্য প্রস্তুত করা, অর্থাৎ কোডে সরাসরি লেখা না রাখা, লোকেল অনুযায়ী ফরম্যাটিং, এবং নমনীয় লেআউট। "18" সংখ্যাটি i এবং n-এর মাঝে থাকা অক্ষরের সংখ্যা।
• Localisation (l10n): অ্যাপকে একটি নির্দিষ্ট ভাষা বা বাজারের জন্য মানানো, বেশিরভাগ ক্ষেত্রে অনুবাদ, কখনো কখনো মুদ্রা, ছবি ও আইনি লেখাও।
• Locale: একটি ভাষা এবং ঐচ্ছিকভাবে একটি অঞ্চল, যেমন en-GB বা pt-BR।

i18n একবার করে নিলে, নতুন প্রতিটি ভাষা যোগ করা মূলত অনুবাদের কাজে পরিণত হয়।

বিকল্প ও তাদের সুবিধা-অসুবিধা

বেশিরভাগ অ্যাপের জন্য অনুবাদ ফাইলসহ একটি স্ট্যান্ডার্ড i18n লাইব্রেরিই ভালো ভিত্তি। চাইলে মেশিন বা AI দিয়ে খসড়া অনুবাদ করুন, তারপর গ্রাহকের চোখে সবচেয়ে বেশি পড়ে এমন লেখাগুলো দক্ষ ভাষাভাষীকে দিয়ে যাচাই করান।

বহুভাষিক অ্যাপের অংশগুলো

অনুবাদ ফাইল

<h1>Welcome back</h1> লেখার বদলে কোড লেখে t('dashboard.welcome'), আর প্রতিটি লোকেলের একটি ফাইলে থাকে লেখাটি:

{
  "dashboard": {
    "welcome": "আবার স্বাগতম, {{name}}",
    "items_one": "{{count}}টি আইটেম",
    "items_other": "{{count}}টি আইটেম"
  }
}

বাক্যের টুকরো জুড়ে নয়, ভেরিয়েবলের জন্য প্লেসহোল্ডার ব্যবহার করুন, কারণ ভাষাভেদে শব্দের ক্রম আলাদা। আর লাইব্রেরির প্লুরাল রুল ব্যবহার করুন: ইংরেজিতে দুটি রূপ আছে (1 item, 2 items), কিন্তু কিছু ভাষায় তিন, চার বা আরও বেশি রূপ থাকে।

তারিখ, সংখ্যা ও টাকার ফরম্যাট

এগুলো হাতে ফরম্যাট করবেন না। ব্রাউজারের অন্তর্নির্মিত Intl API যেকোনো লোকেলের জন্য ফরম্যাট করতে পারে: ইংরেজিতে 1,234.5 জার্মানিতে হয় 1.234,5; তারিখ দিন-আগে বা মাস-আগে হতে পারে; মুদ্রার চিহ্ন অবস্থান বদলায়। তারিখ UTC-তে সংরক্ষণ করুন, টাকা সংখ্যা ও মুদ্রা কোড সহ রাখুন, আর শুধু দেখানোর সময় ফরম্যাট করুন।

লেআউট যা প্রসারিত হয়

অনুবাদিত লেখা প্রায়ই ইংরেজির চেয়ে লম্বা হয় — বিশেষ করে জার্মান ও ফিনিশ শব্দ। নির্দিষ্ট প্রস্থের বাটন ও কাটা-ছাঁটা লেবেল এড়িয়ে চলুন, আর সবচেয়ে লম্বা ভাষা দিয়ে পরীক্ষা করুন।

ডান-থেকে-বামে ভাষা

আরবি, হিব্রু, ফারসি ও উর্দু ডান থেকে বামে পড়া হয়। এসব লোকেলের জন্য পেজে dir="rtl" সেট করুন এবং CSS লজিক্যাল প্রপার্টি ব্যবহার করুন (margin-left-এর বদলে margin-inline-start; Tailwind-এ ml-4-এর বদলে ms-4), যাতে লেআউট নিজে থেকেই উল্টে যায়। তীরের মতো দিক বোঝায় এমন আইকনও উল্টাতে হবে।

ভাষা সুইচ ও শনাক্তকরণ

প্রতিটি পেজে একটি সুইচ দেখান, যেখানে প্রতিটি ভাষার নিজের নাম লেখা থাকে ("Deutsch", "Français", "العربية"), পতাকা নয় — পতাকা দেশ বোঝায়, ভাষা নয়। প্রথম ভিজিটে ব্রাউজারের পছন্দের ভাষা শনাক্ত করে একটি সংস্করণ সাজেস্ট করুন, কিন্তু ভিজিটরের স্পষ্ট পছন্দকেই অগ্রাধিকার দিন এবং তা মনে রাখুন।

URL ও SEO

সার্চ ফলাফলে আসতে চায় এমন পেজের জন্য প্রতি ভাষার নিজস্ব URL লাগবে। ২০২৬ সালের সেপ্টেম্বর পর্যন্ত Google-এর বহুভাষিক সাইটের নির্দেশিকা হলো:

• প্রতি ভাষার আলাদা URL — সাবডিরেক্টরি (example.com/fr/) সবচেয়ে সহজ; সাবডোমেইন ও কান্ট্রি ডোমেইনও কাজ করে। URL প্যারামিটার (?lang=fr) সুপারিশ করা হয় না।
• শুধু কুকি বা ব্রাউজার সেটিং দিয়ে ভাষা বদলাবেন না; Google-এর ক্রলার হয়তো অন্য সংস্করণগুলো কখনোই দেখবে না।
• ভাষা অনুযায়ী স্বয়ংক্রিয় রিডাইরেক্ট করবেন না; বরং সংস্করণগুলোর মধ্যে লিংক দিন।
• hreflang ব্যবহার করুন যাতে Google বুঝতে পারে কোন পেজগুলো একে অপরের অনুবাদ। প্রতিটি সংস্করণে নিজেকে এবং বাকি সবগুলো উল্লেখ থাকতে হবে, নইলে এই চিহ্নগুলো উপেক্ষিত হতে পারে। ফলব্যাক পেজের জন্য x-default যোগ করুন।
• Google একটি পেজের ভাষা শনাক্ত করে তার দৃশ্যমান কন্টেন্ট থেকে, lang বা hreflang থেকে নয় — তাই শুধু মেনু নয়, পুরো পেজটি অনুবাদ করুন।

তবু প্রতিটি সংস্করণে <html lang="fr"> সেট করুন: স্ক্রিন রিডার এটি দেখে সঠিক উচ্চারণ বেছে নেয়, যা একটি অ্যাক্সেসিবিলিটি-এর প্রয়োজনীয়তা।

লগইন করা অ্যাপের স্ক্রিনগুলোর ইনডেক্স হওয়ার দরকার নেই, তাই সেগুলোর জন্য ভাষাটি ব্যবহারকারীর প্রোফাইলে রাখা যথেষ্ট। পাবলিক পেজগুলো প্রথমে ক্রল হওয়ার ব্যবস্থা নিয়ে জানতে AI দিয়ে বানানো ওয়েবসাইটের SEO দেখুন।

ডাটাবেসের কন্টেন্ট

ইন্টারফেসের লেখা ফাইলে থাকে; পণ্যের নাম, ব্লগ পোস্ট ও ক্যাটাগরির মতো কন্টেন্ট থাকে ডাটাবেসে। দুটি সাধারণ ধরন:

• একটি অনুবাদ টেবিল: product_translations (product_id, locale, name, description)। পরিষ্কার এবং অনেক ভাষায় চলে।
• প্রতি ফিল্ডের জন্য একটি JSON কলাম: name: {"en": "...", "fr": "..."}। কয়েকটি ভাষার জন্য সহজ।

অনুবাদ না থাকলে কী হবে তা ঠিক করুন — সাধারণত খালি জায়গা না দেখিয়ে ডিফল্ট ভাষায় ফিরে যান।

ইমেইল ও নোটিফিকেশন

প্রতিটি ব্যবহারকারীর ভাষা সংরক্ষণ করুন এবং ইমেইল, নোটিফিকেশন ও PDF-এও তা ব্যবহার করুন। অ্যাপটি অনুবাদ করা সহজ, কিন্তু ভুলে যাওয়া সহজ যে স্বাগতম ইমেইলটি এখনো ইংরেজিতেই যাচ্ছে।

কাজে লাগানো যায় এমন প্রম্পট

react-i18next দিয়ে i18n যোগ করো। ব্যবহারকারীর দেখা প্রতিটি লেখা locales/en.json-এ নামযুক্ত কী দিয়ে সরিয়ে নাও, স্ট্রিং জোড়া লাগানোর বদলে ইন্টারপোলেশন ও প্লুরাল রুল ব্যবহার করো, আর তারিখ, সংখ্যা ও দাম বর্তমান লোকেল অনুযায়ী Intl দিয়ে ফরম্যাট করো। এখনই কোনো শব্দ বদলিও না।

ফরাসি ও জার্মান যোগ করো। পাবলিক মার্কেটিং পেজগুলো /fr/ ও /de/ URL প্রিফিক্স পাবে, ইংরেজি থাকবে রুটে। প্রতিটি পেজে hreflang লিংক থাকবে (নিজেকেও এবং x-default সহ), আর প্রতি পেজে html lang আলাদাভাবে সেট হবে। প্রতিটি ভাষার নিজের নাম দেখানো একটি ভাষা সুইচ যোগ করো। লগইন করা পেজের জন্য ভাষাটি ব্যবহারকারীর প্রোফাইলে রাখো।

আরবি যোগ করো ডান-থেকে-বামে সাপোর্ট সহ: আরবির জন্য dir="rtl" সেট করো, বাম ও ডান মার্জিন-প্যাডিং বদলে লজিক্যাল প্রপার্টি ব্যবহার করো, দিক-নির্দেশক আইকন উল্টাও, আর নিশ্চিত করো ফর্ম ও টেবিল এখনো ঠিকভাবে পড়া যায়।

ধাপে ধাপে

1. প্রথম অতিরিক্ত ভাষা বাছুন বাস্তব চাহিদার ভিত্তিতে — আপনার ভিজিটর বা গ্রাহক কোথায় আছে।
2. কোড i18n-এর উপযোগী করুন: লেখা ফাইলে সরান, প্লুরাল ও Intl ফরম্যাটিং যোগ করুন। শুধু ইংরেজি দিয়ে এটি রিলিজ করুন এবং নিশ্চিত হোন যে কিছু বদলায়নি।
3. পাবলিক পেজের URL কাঠামো ঠিক করুন এবং hreflang যোগ করুন।
4. অনুবাদ করুন: মেশিন বা AI দিয়ে খসড়া করুন, তারপর একজন দক্ষ ভাষাভাষী দিয়ে যাচাই করান। অনুবাদকদের প্রসঙ্গ দিন — "Book" শব্দটি এক স্ক্রিনে বিশেষ্য, অন্য স্ক্রিনে ক্রিয়া।
5. ডাটাবেসের কন্টেন্ট অনুবাদ করুন এবং ফলব্যাক ঠিক করুন।
6. বাকি অংশও স্থানীয়করণ করুন: ইমেইল, এরর মেসেজ, আইনি পেজ, লেখা আছে এমন ছবি।
7. প্রতিটি ভাষা পরীক্ষা করুন ফোনের প্রস্থে, আর প্রয়োজন হলে ডান-থেকে-বামে মোডেও।
8. একটি প্রক্রিয়া ঠিক করুন যাতে নতুন ফিচারের সাথে অনুবাদও যায়, মাস কয়েক পরে নয়।

সাধারণ ভুল

• বাক্য জোড়া লাগানো ("You have " + n + " messages"), যা অন্য ভাষায় ভেঙে যায়।
• কম্পোনেন্টের ভেতরে হাতে লেখা লেখা থেকে যাওয়া, এরর মেসেজ ও ভ্যালিডেশন স্ট্রিংসহ।
• তারিখ ও দাম হাতে ফরম্যাট করা।
• ভাষার জন্য পতাকা ব্যবহার, আর স্বয়ংক্রিয় রিডাইরেক্ট যা মানুষকে ভুল সংস্করণে আটকে রাখে।
• সব ভাষার জন্য একটিমাত্র URL এমন পেজে যা ইনডেক্স হওয়া দরকার।
• hreflang-এর ফেরত লিংক না থাকা, তাই Google এই চিহ্নগুলো উপেক্ষা করে।
• ইন্টারফেস অনুবাদ করা কিন্তু কন্টেন্ট না করা, বা উল্টোটা।
• যাচাই না করা মেশিন অনুবাদ মূল্য, আইনি ও চেকআউট পেজে।

বহুভাষিক চেকলিস্ট

• ব্যবহারকারীর দেখা কোনো লেখা কোডে সরাসরি নেই; প্লুরাল রুল ও প্লেসহোল্ডার ব্যবহৃত
• তারিখ, সংখ্যা ও মুদ্রা Intl দিয়ে ফরম্যাট করা
• প্রতি পেজে ভাষা সুইচ, নিজের নামসহ; পছন্দ মনে রাখা হয়
• পাবলিক পেজের জন্য প্রতি ভাষার আলাদা URL; জোর করে কোনো রিডাইরেক্ট নেই
• প্রতিটি সংস্করণে hreflang, নিজেকে ও x-default সহ
• প্রতি পেজে html lang (এবং প্রয়োজনে dir="rtl") সেট করা
• ডাটাবেসের কন্টেন্ট অনুবাদ করা, যুক্তিসঙ্গত ফলব্যাকসহ
• ইমেইল ও নোটিফিকেশন ব্যবহারকারীর ভাষায় পাঠানো
• গ্রাহকের সামনের লেখা একজন দক্ষ ভাষাভাষী দিয়ে যাচাই করা

Mythex-এ একাধিক ভাষা

Mythex-এ আপনি চ্যাটে বলে ভাষা যোগ করেন — আলাদা কোনো অনুবাদ প্যানেল নেই — তাই ওপরের প্রম্পটগুলো যেমন আছে তেমনই কাজ করে। প্রথমে i18n ধাপটি করুন এবং ভাষা যোগ করার আগে Preview-তে যাচাই করুন; এটি বড় একটি রিফ্যাক্টর, আর একটি চ্যাট চেকপয়েন্ট থাকলে কিছু ভেঙে গেলে ফিরে যাওয়ার জায়গা থাকে (চ্যাট ও চেকপয়েন্ট)। অ্যাপ যদি AI বা অনুবাদ API দিয়ে স্বয়ংক্রিয়ভাবে কন্টেন্ট অনুবাদ করে, তবে তা আপনার নিজের API কী ব্যবহার করবে, যা প্রজেক্ট সেটিংসে রাখা হয় (এনভায়রনমেন্ট ভেরিয়েবল ও সিক্রেট)। খরচ নিয়ে জানতে LLM API কীভাবে ব্যবহার করবেন দেখুন। নতুন ভাষাগুলো প্রস্তুত হলে আবার পাবলিশ করুন।

প্রশ্নোত্তর