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

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

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

এই নির্দেশিকা Next.js অ্যাপ্লিকেশনগুলোর জন্য যারা Pages Router ব্যবহার করছেন।
আপনি যদি App 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 ফাইলে যোগ করতে পারেন।

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 on 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!"/>;
}

আপনি এখন আপনার সমস্ত React কম্পোনেন্টের ভিতরে স্ট্রিংগুলো অনুবাদ করার জন্য Translate কম্পোনেন্টটি ব্যবহার করতে সক্ষম হওয়া উচিত।

import {Translate} from 'tacotranslate/react';

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

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

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

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

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