Next.js অ্যাপগুলির জন্য আন্তর্জাতিকীকরণের (i18n) সেরা সমাধান

এটি কীভাবে কাজ করে

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

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

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

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

আপনার Next.js অ্যাপ্লিকেশনটিতে আন্তর্জাতিকীকরণ (i18n) বাস্তবায়ন করতে, আমরা প্রথমে একটি 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 বৈশিষ্ট্যসমূহ। লক্ষ্য করুন যে 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!"/>
}

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

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

Be sure to check out the complete example over at our GitHub profile. There, you’ll also find an example of how to do this using the App Router! If you encounter any problems, feel free to reach out, and we’ll be more than happy to help.

TacoTranslate lets you automatically localize your React applications quickly to and from over 75 languages. Get started today!