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

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

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

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

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

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

আপনার Next.js অ্যাপ্লিকেশনটিতে আন্তর্জাতিকীকরণ বাস্তবায়নের জন্য, প্রথমে আমরা একটি 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। এখানে উৎস সম্বন্ধে আরও পড়ুন।

.env

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

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

To integrate TacoTranslate with your application, you’ll need to create a client using the API keys from earlier. For example, create a file named /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 ডকুমেন্টেশনের সাথে সামঞ্জস্য রেখে।

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

পর্ব ৫: মোতায়েন করুন এবং পরীক্ষা করুন!

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

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

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