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 keys ট্যাবে যান। একটি 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 প্রপার্টিগুলো। দ্রষ্টব্য যে 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!"/>;
}

এখন আপনি Translate কম্পোনেন্টটি ব্যবহার করে আপনার সব React কম্পোনেন্টের স্ট্রিংগুলো অনুবাদ করতে সক্ষম হওয়া উচিত।

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!