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

আপনার React অ্যাপ্লিকেশনকে আরও অ্যাক্সেসযোগ্য করুন এবং আন্তর্জাতিকায়ন (i18n) এর মাধ্যমে নতুন বাজারে পৌঁছান।

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

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

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

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

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

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

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

npm install tacotranslate

ধাপ ২: একটি ফ্রি TacoTranslate অ্যাকাউন্ট তৈরি করুন

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

TacoTranslate অ্যাপ্লিকেশন UI-তে একটি প্রজেক্ট তৈরি করুন, এবং এর API keys ট্যাবে যান। একটি 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। এখানে origins সম্পর্কে আরও পড়ুন।

.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_IS_PRODUCTION === 'true'
			? process.env.TACOTRANSLATE_PROJECT_LOCALE
			: undefined,
});

module.exports = tacoTranslate;

আমরা স্বয়ংক্রিয়ভাবে TACOTRANSLATE_API_KEY এবং TACOTRANSLATE_PROJECT_LOCALE শীঘ্রই সংজ্ঞায়িত করবো।

একটি আলাদা ফাইলে ক্লায়েন্ট তৈরি করা পরে আবার ব্যবহার সহজ করে তোলে। getLocales শুধু একটি ইউটিলিটি ফাংশন যা কিছু বিল্ট-ইন এরর হ্যান্ডলিং সহ। এখন, /app/[locale]/tacotranslate.tsx নামক একটি ফাইল তৈরি করুন, যেখানে আমরা TacoTranslate প্রোভাইডারটি ইমপ্লিমেন্ট করব।

/app/[locale]/tacotranslate.tsx

'use client';

import React, {type ReactNode} from 'react';
import {
	type TranslationContextProperties,
	TacoTranslate as ImportedTacoTranslate,
} from 'tacotranslate/react';
import tacoTranslateClient from '@/tacotranslate-client';

export default function TacoTranslate({
	locale,
	origin,
	localizations,
	children,
}: TranslationContextProperties & {
	readonly children: ReactNode;
}) {
	return (
		<ImportedTacoTranslate
			client={tacoTranslateClient}
			locale={locale}
			origin={origin}
			localizations={localizations}
		>
			{children}
		</ImportedTacoTranslate>
	);
}

মনে করুন 'use client'; নির্দেশ করছে যে এটি একটি ক্লায়েন্ট কম্পোনেন্ট।

কন্টেক্সট প্রদানকারী এখন প্রস্তুত হওয়ার পর, আমাদের অ্যাপ্লিকেশনের রুট লেআউট হিসেবে /app/[locale]/layout.tsx নামে একটি ফাইল তৈরি করুন। লক্ষ্য করুন যে এই পাথটিতে একটি ফোল্ডার রয়েছে যা Dynamic Routes ব্যবহার করছে, যেখানে [locale] হলো ডাইনামিক প্যারামিটার।

/app/[locale]/layout.tsx

import React, {type ReactNode} from 'react';
import {type Locale, isRightToLeftLocaleCode} from 'tacotranslate';
import './global.css';
import tacoTranslateClient from '@/tacotranslate-client';
import TacoTranslate from './tacotranslate';

export async function generateStaticParams() {
	const locales = await tacoTranslateClient.getLocales();
	return locales.map((locale) => ({locale}));
}

type RootLayoutParameters = {
	readonly params: Promise<{locale: Locale}>;
	readonly children: ReactNode;
};

export default async function RootLayout({params, children}: RootLayoutParameters) {
	const {locale} = await params;
	const origin = process.env.TACOTRANSLATE_ORIGIN;
	const localizations = await tacoTranslateClient.getLocalizations({
		locale,
		origins: [origin /* , other origins to fetch */],
	});

	return (
		<html lang={locale} dir={isRightToLeftLocaleCode(locale) ? 'rtl' : 'ltr'}>
			<body>
				<TacoTranslate
					locale={locale}
					origin={origin}
					localizations={localizations}
				>
					{children}
				</TacoTranslate>
			</body>
		</html>
	);
}

এখানে প্রথম যে জিনিসটি লক্ষ্য করার তা হলো আমরা আমাদের Dynamic Route প্যারামিটার [locale] ব্যবহার করে সেই ভাষার অনুবাদগুলো নিয়ে আসছি। অতিরিক্তভাবে, generateStaticParams নিশ্চিত করছে যে আপনার প্রকল্পের জন্য সক্রিয় করা সব লোকেল কোডগুলো প্রি-রেন্ডার হয়েছে।

এখন, চলুন আমাদের প্রথম পাতা তৈরি করি! /app/[locale]/page.tsx নামে একটি ফাইল তৈরি করুন।

/app/[locale]/page.tsx

import React from 'react';
import {Translate} from 'tacotranslate/react';

export const revalidate = 60;
export default async function Page() {
	return (
		<Translate string="Hello, world!" />
	);
}

মনোযোগ দিন revalidate ভেরিয়েবলটির দিকে যা Next.js-কে ৬০ সেকেন্ড পর পৃষ্ঠাটি পুনর্নির্মাণ করতে বলে, এবং আপনার অনুবাদগুলো আপ-টু-ডেট রাখতে সাহায্য করে।

ধাপ ৪: সার্ভার সাইড রেন্ডারিং বাস্তবায়ন করা

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

সার্ভার সাইড রেন্ডারিং সেট আপ করতে, /next.config.js তৈরি করুন বা পরিবর্তন করুন:

/next.config.js

const withTacoTranslate = require('tacotranslate/next/config').default;
const tacoTranslateClient = require('./tacotranslate-client');

module.exports = async () => {
	const config = await withTacoTranslate(
		{},
		{
			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'),
		}
	);

	// NOTE: Remove i18n from config when using the app router
	return {...config, i18n: undefined};
};

আপনার সেটআপ অনুযায়ী isProduction চেকটি পরিবর্তন করুন। যদি true হয়, TacoTranslate পাবলিক API কী প্রদর্শন করবে। যদি আমরা লোকাল, টেস্ট, অথবা স্টেজিং পরিবেশে থাকি (isProduction is false) তাহলে আমরা সিক্রেট read/write API কী ব্যবহার করব যাতে নতুন স্ট্রিংগুলো অনুবাদের জন্য পাঠানো হয়।

রাউটিং এবং রিডাইরেকশন প্রত্যাশা অনুযায়ী কাজ করে তা নিশ্চিত করার জন্য, আমাদের /middleware.ts নামে একটি ফাইল তৈরি করতে হবে। Middleware ব্যবহার করে, আমরা ব্যবহারকারীদের তাদের পছন্দের ভাষায় প্রদর্শিত পৃষ্ঠাগুলিতে পুনঃনির্দেশিত করতে পারি।

/middleware.ts

import {type NextRequest} from 'next/server';
import {middleware as tacoTranslateMiddleware} from 'tacotranslate/next';
import tacoTranslate from '@/tacotranslate-client';

export const config = {
	matcher: ['/((?!api|_next|favicon.ico).*)'],
};

export async function middleware(request: NextRequest) {
	return tacoTranslateMiddleware(tacoTranslate, request);
}

নিশ্চিত করুন যে matcherটি Next.js Middleware documentation অনুযায়ী সেটআপ করা হয়েছে।

ক্লায়েন্টে, আপনি ব্যবহারকারীর পছন্দসই ভাষা পরিবর্তন করার জন্য locale কুকি পরিবর্তন করতে পারেন। এটি কীভাবে করবেন সে সম্পর্কিত ধারণার জন্য সম্পূর্ণ উদাহরণ কোডটি দেখুন!

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

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

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

TacoTranslate আপনাকে সাহায্য করে আপনার React অ্যাপ্লিকেশনগুলি স্বয়ংক্রিয়ভাবে যেকোনো ভাষায় দ্রুত স্থানীয়করণ করতে। আজই শুরু করুন!