কিভাবে একটি 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 keys ট্যাবে যান। একটি read key এবং একটি read/write key তৈরি করুন। আমরা এগুলোকে পরিবেশগত ভেরিয়েবলের মতো সংরক্ষণ করব। read key-কে আমরা public বলি এবং read/write key হলো 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 এ ডিফল্ট হিসেবে ৬০ সেট করা আছে, যাতে আপনার অনুবাদগুলি আপ-টু-ডেট থাকে।

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