Next.js অ্যাপ্লিকেশনে (যা Pages Router ব্যবহার করছে) আন্তর্জাতিকীকরণ কিভাবে বাস্তবায়ন করবেন

আপনার React অ্যাপ্লিকেশনকে আরও অ্যাক্সেসযোগ্য করে আন্তর্জাতিকীকরণ (i18n) ব্যবহার করে নতুন বাজারে পৌঁছান।

বিশ্ব আরও গ্লোবালাইজড হওয়ায়, ওয়েব ডেভেলপারদের জন্য বিভিন্ন দেশ ও সংস্কৃতির ব্যবহারকারীদের চাহিদা মেটাতে সক্ষম এমন অ্যাপ্লিকেশন তৈরি করা ক্রমেই আরও গুরুত্বপূর্ণ হয়ে উঠছে। আন্তর্জাতিকীকরণ (i18n) হল এটি অর্জনের একটি প্রধান উপায়, যা আপনাকে আপনার অ্যাপ্লিকেশনকে বিভিন্ন ভাষা, মুদ্রা, এবং তারিখ বিন্যাসে অভিযোজিত করতে দেয়।

এই টিউটোরিয়ালে আমরা সার্ভার-সাইড রেন্ডারিং সহ কিভাবে আপনার React Next.js অ্যাপ্লিকেশনে আন্তর্জাতিকীকরণ যোগ করবেন তা দেখব। TL;DR: সম্পূর্ণ উদাহরণটি এখানে দেখুন।

এই গাইডটি Next.js অ্যাপ্লিকেশনগুলোর জন্য যারা Pages Router ব্যবহার করছেন।
আপনি যদি App Router ব্যবহার করেন, অনুগ্রহ করে এর পরিবর্তে এই গাইডটি দেখুন।

ধাপ ১: একটি i18n লাইব্রেরি ইনস্টল করুন

আপনার Next.js অ্যাপ্লিকেশনে আন্তর্জাতিককরণ (i18n) বাস্তবায়ন করতে, আমরা প্রথমে একটি i18n লাইব্রেরি নির্বাচন করব। কয়েকটি জনপ্রিয় লাইব্রেরি আছে, যার মধ্যে রয়েছে next-intl. তবে, এই উদাহরণে আমরা ব্যবহার করব TacoTranslate.

TacoTranslate অত্যাধুনিক AI ব্যবহার করে আপনার স্ট্রিংগুলোকে স্বয়ংক্রিয়ভাবে যে কোনো ভাষায় অনুবাদ করে এবং JSON ফাইলগুলির ক্লান্তিকর পরিচালনা থেকে আপনাকে মুক্ত করে।

চলুন এটি আপনার টার্মিনালে npm ব্যবহার করে ইনস্টল করি:

npm install tacotranslate

ধাপ ২: একটি বিনামূল্যের TacoTranslate অ্যাকাউন্ট তৈরি করুন

এখন যেহেতু আপনি মডিউলটি ইনস্টল করে ফেলেছেন, আপনার TacoTranslate অ্যাকাউন্ট, একটি অনুবাদ প্রকল্প, এবং সংশ্লিষ্ট API কী তৈরি করার সময় এসেছে। এখানেই একটি অ্যাকাউন্ট তৈরি করুন। এটি বিনামূল্যে, এবং এর জন্য আপনাকে ক্রেডিট কার্ড যোগ করতে হবে না।

TacoTranslate অ্যাপ্লিকেশন UI-তে একটি প্রকল্প তৈরি করুন এবং এর API কীস ট্যাবে যান। একটি read কী এবং একটি read/write কী তৈরি করুন। আমরা এগুলো পরিবেশ ভেরিয়েবল হিসেবে সংরক্ষণ করব। read কীকে আমরা public বলি, এবং read/write কীটি হচ্ছে secret. উদাহরণস্বরূপ, আপনি এগুলো আপনার প্রকল্পের রুটে থাকা .env ফাইলে যোগ করতে পারেন।

.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। এখানে অরিজিন সম্পর্কে আরও পড়ুন।

.env

TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com

ধাপ ৩: TacoTranslate সেট আপ করা

আপনার অ্যাপ্লিকেশনের সাথে TacoTranslate একীভূত করতে, আপনাকে পূর্বে তৈরি করা API কী ব্যবহার করে একটি ক্লায়েন্ট তৈরি করতে হবে। উদাহরণস্বরূপ, একটি ফাইল তৈরি করুন যার নাম /tacotranslate-client.js.

/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 প্রোভাইডারটি যুক্ত করব।

/pages/_app.tsx

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, অনুগ্রহ করে উপরোক্ত প্রপার্টি এবং কোড দিয়ে সংজ্ঞাটি সম্প্রসারণ করুন।

ধাপ 4: সার্ভার-সাইড রেন্ডারিং বাস্তবায়ন

TacoTranslate আপনার অনুবাদগুলির সার্ভার-সাইড রেন্ডারিং সমর্থন করে। এটি ব্যবহারকারীর অভিজ্ঞতা ব্যাপকভাবে উন্নত করে, কারণ অনুবাদিত বিষয়বস্তু তৎক্ষণাৎ প্রদর্শিত হয়, অনুবাদহীন বিষয়বস্তুর ঝলক দেখানোর বদলে। এছাড়াও, ক্লায়েন্টে নেটওয়ার্ক অনুরোধ আমরা এড়াতে পারি, কারণ আমাদের কাছে ইতিমধ্যেই সব অনুবাদ রয়েছে।

আমরা /next.config.js তৈরি বা পরিবর্তন করে শুরু করব।

/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 প্রোপার্টি। মনে রাখবেন যে revalidate getTacoTranslateStaticProps এ ডিফল্টভাবে 60 সেট করা আছে, যাতে আপনার অনুবাদগুলো আপ-টু-ডেট থাকে।

পৃষ্ঠায় যে কোনো একটি ফাংশন ব্যবহার করতে, ধরা যাক আপনার একটি পেজ ফাইল আছে যেমন /pages/hello-world.tsx.

/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!"/>
}

ধাপ ৫: ডিপ্লয় করুন এবং পরীক্ষা করুন!

সম্পন্ন! আপনার React অ্যাপ্লিকেশন এখন স্বয়ংক্রিয়ভাবে অনুবাদ হবে যখনই আপনি Translate কম্পোনেন্টে কোনো স্ট্রিং যোগ করবেন। দ্রষ্টব্য: কেবল সেই পরিবেশগুলোই API কী-তে read/write অনুমতি থাকলে নতুন অনুবাদযোগ্য স্ট্রিং তৈরি করতে পারবে। আমরা সুপারিশ করি একটি বন্ধ ও সুরক্ষিত স্টেজিং পরিবেশ রাখুন যেখানে আপনি এমন একটি API কী ব্যবহার করে আপনার প্রোডাকশন অ্যাপ্লিকেশন পরীক্ষা করতে পারেন এবং লাইভ হওয়ার আগে নতুন স্ট্রিংগুলো যোগ করেন। এতে করে কেউই আপনার গোপন API কী চুরি করতে পারবে না, এবং অপ্রাসঙ্গিক নতুন স্ট্রিং যোগ করে সম্ভবত আপনার অনুবাদ প্রকল্পকে অপ্রয়োজনীয়ভাবে বড় করে তোলা থেকেও রক্ষা পাওয়া যাবে।

অবশ্যই সম্পূর্ণ উদাহরণটি দেখুন আমাদের GitHub প্রোফাইলে। সেখানে আপনি আরও একটি উদাহরণও পাবেন যে কিভাবে এটি App Router ব্যবহার করে করা যায়! যদি আপনি কোনো সমস্যার সম্মুখীন হন, নির্দ্বিধায় যোগাযোগ করুন, এবং আমরা সাহায্য করতে পেরে আনন্দিত হব।

TacoTranslate আপনাকে আপনার React অ্যাপ্লিকেশনগুলো দ্রুত এবং স্বয়ংক্রিয়ভাবে 75 টিরও বেশি ভাষায় লোকালাইজ করতে দেয়। আজই শুরু করুন!