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

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

যখন বিশ্ব আরো বৈশ্বিকায়িত হচ্ছে, তখন ওয়েব ডেভেলপারদের জন্য এমন অ্যাপ্লিকেশন তৈরি করা অনেক বেশি গুরুত্বপূর্ণ হয়ে উঠেছে যা বিভিন্ন দেশ ও সংস্কৃতির ব্যবহারকারীদের চাহিদা পূরণ করতে পারে। One of the key ways to achieve this is through internationalization (i18n), which allows you to adapt your application to different languages, currencies, and date formats.

এই নিবন্ধে, আমরা সার্ভার-সাইড রেন্ডারিংসহ কীভাবে আপনার 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 কী ট্যাবে যান। একটি 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_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!" />
	);
}

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

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

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 মিডলওয়্যার ডকুমেন্টেশন-এর অনুযায়ী সেট আপ করা আছে।

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

ধাপ ৫: স্থাপন করুন এবং পরীক্ষা করুন!

সম্পন্ন হল! আপনার React অ্যাপ্লিকেশনটি এখন স্বয়ংক্রিয়ভাবে অনুবাদ করা হবে যখন আপনি 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 Pages 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!