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

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

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

এই গাইডটি Next.js অ্যাপ্লিকেশনগুলোর জন্য যা Pages Router ব্যবহার করছে।
যদি আপনি App Router ব্যবহার করেন, তাহলে অনুগ্রহ করে এই গাইডটি দেখুন।

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

আপনার Next.js অ্যাপে আন্তর্জাতিকীকরণ (internationalization) বাস্তবায়নের জন্য, আমরা প্রথমে একটি 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 ফাইলে যোগ করতে পারেন।

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

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

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

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

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