কিভাবে একটি Next.js অ্যাপ্লিকেশনে আন্তর্জাতিকীকরণ (internationalization) বাস্তবায়ন করবেন যা 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। এখানে আরও জানুন origins সম্পর্কে।

TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com

ধাপ ৩: TacoTranslate সেটআপ করা

To integrate TacoTranslate with your application, you’ll need to create a client using the API keys from earlier. For example, create a file named /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 অবজেক্ট, টাকোট্রান্সলেটের জন্য কনফিগারেশন এবং ঐচ্ছিক Next.js বৈশিষ্ট্য। নোট করুন যে getTacoTranslateStaticProps revalidate ডিফল্টরূপে 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 কম্পোনেন্টে যেকোনো স্ট্রিং যোগ করবেন। লক্ষ্য করুন যে শুধুমাত্র সেই পরিবেশগুলি যেখানে read/write অনুমতি সহ API কী রয়েছে, নতুন স্ট্রিং তৈরির মাধ্যমে অনুবাদ করতে পারবে। আমরা পরামর্শ দিচ্ছি একটি বন্ধ এবং নিরাপদ স্টেজিং পরিবেশ রাখার, যেখানে আপনি আপনার প্রোডাকশন অ্যাপ্লিকেশনটি এমন API কী দিয়ে পরীক্ষা করতে পারবেন, লাইভ যাওয়ার আগে নতুন স্ট্রিং যোগ করে। এটি কারো পক্ষ থেকে আপনার গোপন API কী চুরি হওয়া থেকে বিরত রাখবে এবং সম্ভাব্য অপ্রাসঙ্গিক নতুন স্ট্রিং যোগ করে আপনার অনুবাদ প্রকল্পকে অতিরিক্ত বাড়িয়ে তোলা থেকে রক্ষা করবে।

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

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