Next.js অ্যাপ্লিকেশনে (যা Pages Router ব্যবহার করছে) আন্তর্জাতিকীকরণ (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 অ্যাপ্লিকেশনগুলোর জন্য যারা Pages Router ব্যবহার করছে.
আপনি যদি App Router ব্যবহার করে থাকেন, অনুগ্রহ করে পরিবর্তে এই গাইডটি দেখুন.

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

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

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

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

npm install tacotranslate

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

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

TacoTranslate অ্যাপ্লিকেশনের UI-তে একটি প্রকল্প তৈরি করুন এবং তার API কী ট্যাবে যান। একটি read কী এবং একটি read/write কী তৈরি করুন। আমরা এগুলোকে এনভায়রনমেন্ট ভেরিয়েবল হিসেবে সংরক্ষণ করব। যেটাকে আমরা public বলি তা হলো read কী, এবং 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!"/>;
}

এখন আপনি Translate কম্পোনেন্ট ব্যবহার করে আপনার সকল React কম্পোনেন্টের মধ্যে থাকা স্ট্রিংগুলো অনুবাদ করতে পারবেন।

import {Translate} from 'tacotranslate/react';

function Component() {
	return <Translate string="Hello, world!"/>
}

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

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

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

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