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

আপনার React অ্যাপ্লিকেশনকে আরও অ্যাক্সেসযোগ্য করুন এবং আন্তর্জাতিকীকরণ (i18n) এর মাধ্যমে নতুন বাজারে পৌঁছান।

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

.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। অরিজিন সম্পর্কে আরও পড়ুন এখানে।

.env

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

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

আপনার অ্যাপ্লিকেশনের সাথে TacoTranslate ইন্টিগ্রেট করতে, আপনাকে আগের API কীগুলি ব্যবহার করে একটি ক্লায়েন্ট তৈরি করতে হবে। উদাহরণস্বরূপ, /tacotranslate-client.js নামক একটি ফাইল তৈরি করুন।

/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 প্রোভাইডার যোগ করব।

/pages/_app.tsx

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 ফাইল তৈরি করে বা সম্পাদনা করে।

/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 এর মত একটি পেজ ফাইল আছে।

/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 অ্যাপ্লিকেশনগুলি ৭৫টিরও বেশি ভাষায় লোকালাইজ করতে সাহায্য করে। আজই শুরু করুন!