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

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

এই টিউটোরিয়ালে, আমরা কিভাবে আপনার 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 keys ট্যাবে যান। একটি 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 প্রপার্টিজ। উল্লেখ্য যে getTacoTranslateStaticProps এর revalidate ডিফল্টভাবে ৬০ সেট করা থাকে, যাতে আপনার অনুবাদসমূহ সর্বদা আপডেট থাকে।

যে কোনো একটি ফাংশন একটি পেজে ব্যবহার করার জন্য, ধরুন আপনার কাছে /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!"/>
}

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

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

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

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