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

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

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

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

Step 1: একটি 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 ফাইলে যোগ করতে পারেন।

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

কোনো একটি ফাংশন পেজে ব্যবহার করতে, ধরা যাক আপনার একটি পেজ ফাইল আছে যেমন /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 অ্যাপ্লিকেশনগুলোকে স্বয়ংক্রিয়ভাবে ৭৫টিরও বেশি ভাষায় দ্রুত স্থানীয়করণ করতে দেয়। আজই শুরু করুন!