Next.js অ্যাপ্লিকেশনে যা 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 ট্যাবে যান। Create one read key, and one read/write key. আমরা এগুলো পরিবেশ ভ্যারিয়েবল হিসেবে সংরক্ষণ করব। The read key is what we call public and the read/write key is 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!"/>;
}

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

import {Translate} from 'tacotranslate/react';

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

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

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

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

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