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

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

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

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

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

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

আপনার Next.js অ্যাপ্লিকেশনে আন্তর্জাতিকীকরণ (i18n) বাস্তবায়ন করতে, আমরা প্রথমে একটি i18n লাইব্রেরি নির্বাচন করব। কিছু জনপ্রিয় লাইব্রেরি রয়েছে, যার মধ্যে next-intl রয়েছে। তবে, এই উদাহরণে আমরা TacoTranslate ব্যবহার করব।

TacoTranslate আধুনিক কৃত্রিম বুদ্ধিমত্তা ব্যবহার করে আপনার স্ট্রিংগুলোকে স্বয়ংক্রিয়ভাবে যেকোন ভাষায় অনুবাদ করে, এবং আপনাকে JSON ফাইলগুলোর ক্লান্তিকর ব্যবস্থাপনা থেকে মুক্ত করে।

চলুন এটি আপনার টার্মিনালে npm ব্যবহার করে ইনস্টল করি:

npm install tacotranslate

ধাপ 2: একটি বিনামূল্যের 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!