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

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

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

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

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

ধাপ ১: একটি 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

Step 3: TacoTranslate সেট আপ করা

আপনার অ্যাপ্লিকেশনটির সাথে টাকোট্রান্সলেট সংহত করতে, আপনাকে আগের থেকে এপিআই কীগুলি ব্যবহার করে একটি ক্লায়েন্ট তৈরি করতে হবে। উদাহরণস্বরূপ, /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!"/>
}

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

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

নিশ্চিত করুন যে আপনি আমাদের GitHub প্রোফাইলে সম্পূর্ণ উদাহরণটি পরীক্ষা করেছেন। সেখানে, আপনি App Router ব্যবহার করে এটি কীভাবে করতে হয় তার একটি উদাহরণও পাবেন! যদি আপনি কোনো সমস্যার সম্মুখীন হন, তাহলে বিনা দ্বিধায় যোগাযোগ করুন, আমরা সহায়তা করতে স্বচ্ছন্দ হব।

TacoTranslate আপনাকে আপনার React অ্যাপ্লিকেশনগুলোকে যেকোনো ভাষায় দ্রুত এবং স্বয়ংক্রিয়ভাবে লোকালাইজ করার সুযোগ দেয়। আজই শুরু করুন!