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

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

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

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

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

আপনার Next.js অ্যাপে আন্তর্জাতিকীকরণ কার্যকর করার জন্য, আমরা প্রথমে একটি 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 থাকে, অনুগ্রহ করে উপরের প্রপার্টি ও কোড দিয়ে সংজ্ঞাটি সম্প্রসারিত করুন।

Step 4: সার্ভার-সাইড রেন্ডারিং বাস্তবায়ন

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