Next.js অ্যাপগুলিতে আন্তর্জাতিকীকরণের (i18n) জন্য সেরা সমাধান
আপনি কি আপনার Next.js অ্যাপ্লিকেশনকে নতুন বাজারে সম্প্রসারণ করতে চান? TacoTranslate আপনার Next.js প্রকল্পকে স্থানীয়করণ করা অত্যান্ত সহজ করে তোলে, যা আপনাকে ঝামেলা ছাড়াই একটি বৈশ্বিক দর্শক সম্প্রদায়ের কাছে পৌঁছাতে সক্ষম করে।
Next.js-এর জন্য কেন TacoTranslate নির্বাচন করবেন?
- নিরবচ্ছিন্ন সংযোগ: বিশেষ করে Next.js অ্যাপ্লিকেশনের জন্য ডিজাইন করা হয়েছে, TacoTranslate আপনার বিদ্যমান ওয়ার্কফ্লোতে সহজেই সংযুক্ত হয়।
- স্বয়ংক্রিয় স্ট্রিং সংগ্রহ: আর ম্যানুয়ালি JSON ফাইল পরিচালনা করার দরকার নেই। TacoTranslate স্বয়ংক্রিয়ভাবে আপনার কোডবেস থেকে স্ট্রিং সংগ্রহ করে।
- এআই-চালিত অনুবাদ: এআই-এর শক্তি ব্যবহার করে প্রাসঙ্গিক এবং সঠিক অনুবাদ প্রদান করুন যা আপনার অ্যাপ্লিকেশনের টোনের সাথে মানানসই।
- তাত্ক্ষণিক ভাষা সমর্থন: নতুন ভাষার সমর্থন মাত্র এক ক্লিকে যোগ করুন, আপনার অ্যাপ্লিকেশনকে বিশ্বব্যাপী অ্যাক্সেসযোগ্য করে তুলুন।
এটি কীভাবে কাজ করে
যখন বিশ্ব আরও গ্লোবালাইজড হচ্ছে, তখন ওয়েব ডেভেলপারদের জন্য বিভিন্ন দেশ ও সাংস্কৃতিক পটভূমির ব্যবহারকারীদের জন্য উপযুক্ত অ্যাপ্লিকেশন তৈরি করা আরও গুরুত্বপূর্ণ হয়ে উঠছে। এটি অর্জনের একটি মূল উপায় হল আন্তর্জাতিকীকরণ (i18n), যা আপনাকে আপনার অ্যাপ্লিকেশনকে বিভিন্ন ভাষা, মুদ্রা এবং তারিখের ফরম্যাট অনুযায়ী মানিয়ে নিতে সাহায্য করে।
এই টিউটোরিয়ালে, আমরা দেখব কিভাবে আপনার React Next.js অ্যাপ্লিকেশনে সার্ভার সাইড রেন্ডারিং সহ আন্তর্জাতিকীকরণ যোগ করবেন। TL;DR: সম্পূর্ণ উদাহরণটি এখানে দেখুন।
এই গাইডটি Next.js অ্যাপ্লিকেশনগুলোর জন্য যারা Pages Router ব্যবহার করছে।
আপনি যদি App Router ব্যবহার করেন, তাহলে দয়া করে পরিবর্তে এই গাইডটি দেখুন।
Step 1: একটি i18n লাইব্রেরি ইনস্টল করুন
আপনার Next.js অ্যাপ্লিকেশনে আন্তর্জাতিককরণ (i18n) বাস্তবায়নের জন্য, আমরা প্রথমে একটি i18n লাইব্রেরি নির্বাচন করব। কয়েকটি জনপ্রিয় লাইব্রেরি রয়েছে, যার মধ্যে আছে next-intl. তবে, এই উদাহরণে, আমরা ব্যবহার করব TacoTranslate.
TacoTranslate আপনার স্ট্রিংগুলি যেকোনো ভাষায় স্বয়ংক্রিয়ভাবে cutting-edge AI ব্যবহার করে অনুবাদ করে, এবং আপনাকে JSON ফাইলের ক্লান্তিকর পরিচালনা থেকে মুক্ত করে দেয়।
চলুন এটি আপনার টার্মিনালে npm ব্যবহার করে ইনস্টল করি:
npm install tacotranslate
ধাপ ২: একটি মুক্ত TacoTranslate অ্যাকাউন্ট তৈরি করুন
এখন আপনার মডিউলটি ইনস্টল হয়ে গেছে, তাই এখন সময় আপনার TacoTranslate অ্যাকাউন্ট, একটি অনুবাদ প্রকল্প, এবং সংশ্লিষ্ট API কী তৈরি করার। এখানে একটি অ্যাকাউন্ট তৈরি করুন। এটি বিনামূল্যে, এবং আপনাকে ক্রেডিট কার্ড যোগ করতে হবে না।
TacoTranslate অ্যাপ্লিকেশন UI এর মধ্যে, একটি প্রকল্প তৈরি করুন, এবং এর API keys ট্যাবে যান। একটি 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
ধাপ ৩: 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_DEFAULT_LOCALE ?? '',
});
module.exports = tacoTranslate;
আমরা স্বয়ংক্রিয়ভাবে TACOTRANSLATE_API_KEY
শীঘ্রই নির্ধারণ করব।
একটি আলাদা ফাইলে ক্লায়েন্ট তৈরি করা পরে আবার ব্যবহার করা সহজ করে তোলে। এখন, একটি কাস্টম /pages/_app.tsx
ব্যবহার করে, আমরা TacoTranslate
প্রোভাইডারটি যোগ করব।
import React from 'react';
import {type AppProps} from 'next/app';
import {type Origin, type Locale, type Localizations} from 'tacotranslate';
import TacoTranslate from 'tacotranslate/react';
import TacoTranslateHead from 'tacotranslate/next/head';
import tacoTranslate from '../tacotranslate-client';
type PageProperties = {
origin: Origin;
locale: Locale;
locales: Locale[];
localizations: Localizations;
};
export default function App({Component, pageProps}: AppProps<PageProperties>) {
const {origin, locale, locales, localizations} = pageProps;
return (
<TacoTranslate
client={tacoTranslate}
origin={origin}
locale={locale}
localizations={localizations}
>
<TacoTranslateHead rootUrl="https://your-website.com" locales={locales} />
<Component {...pageProps} />
</TacoTranslate>
);
}
যদি আপনার কাছে ইতিমধ্যেই কাস্টম pageProps
এবং _app.tsx
থাকে, তাহলে উপরোক্ত প্রোপার্টি এবং কোড সহ সংজ্ঞাটি বিস্তৃত করুন।
পদক্ষেপ ৪: সার্ভার সাইড রেন্ডারিং বাস্তবায়ন করা
TacoTranslate আপনার অনুবাদগুলির সার্ভার সাইড রেন্ডারিংয়ের অনুমতি দেয়। এটি ব্যবহারকারীর অভিজ্ঞতাকে ব্যাপকভাবে উন্নত করে কারণ এটি অবিলম্বে অনূদিত বিষয়বস্তু প্রদর্শন করে, প্রথমে অনূদিত নয় এমন বিষয়বসুতোর ঝলক দেখানোর পরিবর্তে। এছাড়াও, আমরা ক্লায়েন্টে নেটওয়ার্ক অনুরোধ এড়াতে পারি, কারণ আমাদের কাছে ইতোমধ্যে প্রয়োজনীয় সকল অনুবাদ রয়েছে।
আমরা শুরু করব /next.config.js
ফাইলটি তৈরি বা পরিবর্তন করে।
const withTacoTranslate = require('tacotranslate/next/config').default;
const tacoTranslateClient = require('./tacotranslate-client');
module.exports = async () => {
const config = {};
return withTacoTranslate(config, {
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'),
});
};
আপনার সেটআপ অনুযায়ী isProduction
চেকটি পরিবর্তন করুন। যদি true
হয়, তাহলে TacoTranslate পাবলিক API কী প্রদর্শন করবে। যদি আমরা একটি লোকাল, টেস্ট, বা স্টেজিং পরিবেশে থাকি (isProduction
is false
), তাহলে নতুন স্ট্রিং গুলো অনুবাদের জন্য পাঠানোর নিশ্চয়তার জন্য আমরা সিক্রেট read/write
API কী ব্যবহার করব।
এ পর্যন্ত, আমরা শুধুমাত্র Next.js অ্যাপ্লিকেশনটিকে সমর্থিত ভাষাগুলোর একটি তালিকা দিয়ে সেট করেছি। পরবর্তী যে কাজটি আমরা করব তা হলো আপনার সকল পেজের জন্য অনুবাদ সংগ্রহ করা। সেটা করার জন্য, আপনার প্রয়োজন অনুসারে আপনি getTacoTranslateStaticProps
অথবা getTacoTranslateServerSideProps
ব্যবহার করবেন।
এই ফাংশনগুলো তিনটি আর্গুমেন্ট নেয়: একটি Next.js Static Props Context অবজেক্ট, TacoTranslate-এর কনফিগারেশন, এবং ঐচ্ছিক Next.js প্রোপার্টিজ। লক্ষ্য করুন যে getTacoTranslateStaticProps
এর revalidate
ডিফল্টভাবে ৬০ সেট করা থাকে, যাতে আপনার অনুবাদসমূহ সর্বদা আপডেট থাকে।
একটি পৃষ্ঠায় যেকোনো একটি ফাংশন ব্যবহার করতে, ধরা যাক আপনার কাছে এমন একটি পৃষ্ঠা ফাইল রয়েছে /pages/hello-world.tsx
.
import {Translate} from 'tacotranslate/react';
import getTacoTranslateStaticProps from 'tacotranslate/next/get-static-props';
import tacoTranslateClient from '../tacotranslate-client';
export async function getStaticProps(context) {
return getTacoTranslateStaticProps(context, {client: tacoTranslateClient});
}
export default function Page() {
return <Translate string="Hello, world!"/>;
}
এখন আপনি আপনার সব React কম্পোনেন্টের মধ্যে স্ট্রিংগুলি অনুবাদ করতে Translate
কম্পোনেন্টটি ব্যবহার করতে সক্ষম হওয়া উচিত।
import {Translate} from 'tacotranslate/react';
function Component() {
return <Translate string="Hello, world!"/>
}
পদক্ষেপ ৫: ডিপ্লয় এবং পরীক্ষা করুন!
আমরা শেষ করেছি! এখন থেকে আপনার Next.js অ্যাপ্লিকেশন স্বয়ংক্রিয়ভাবে অনূদিত হবে যখন আপনি কোনও স্ট্রিং Translate
কম্পোনেন্টে যোগ করবেন। লক্ষ্য করুন যে শুধুমাত্র সেই পরিবেশগুলি যার API কী-তে read/write
অনুমতি রয়েছে নতুন স্ট্রিং অনূদিত করার জন্য তৈরি করতে পারবে। আমরা সুপারিশ করি একটি বন্ধ এবং সুরক্ষিত স্টেজিং পরিবেশ রাখার যেখানে আপনি আপনার প্রোডাকশন অ্যাপ্লিকেশনটি এই ধরনের API কী দিয়ে পরীক্ষা করতে পারেন, লাইভ যাওয়ার আগে নতুন স্ট্রিং যোগ করে। এটি কারো পক্ষ থেকে আপনার গোপন API কী চুরি হওয়া থেকে রক্ষা করবে এবং সম্ভাব্যভাবে আপনার অনুবাদ প্রকল্পকে নতুন, অপ্রাসঙ্গিক স্ট্রিং যোগ করে অপ্রয়োজনীয়ভাবে সম্প্রসারিত হওয়া থেকে বিরত রাখবে।
Be sure to check out the complete example over at our GitHub profile. There, you’ll also find an example of how to do this using the App Router! If you encounter any problems, feel free to reach out, and we’ll be more than happy to help.
TacoTranslate lets you automatically localize your React applications quickly to and from over 75 languages. Get started today!