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

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

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

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

এই গাইডটি তাদের জন্য যারা Pages Router ব্যবহার করে Next.js অ্যাপ্লিকেশনে কাজ করছেন।
আপনি যদি 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 প্রপার্টিজ। লক্ষ্য করুন যে getTacoTranslateStaticProps এর revalidate ডিফল্টরূপে ৬০ সেট করা আছে, যাতে আপনার অনুবাদসমূহ সর্বদা হালনাগাদ থাকে।

কোনো একটি ফাংশন পৃষ্ঠায় ব্যবহারের জন্য, ধরে নেই আপনার কাছে এমন একটি পৃষ্ঠা ফাইল রয়েছে যেমন /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 অ্যাপ্লিকেশনগুলোকে যেকোনো ভাষায় দ্রুত ও স্বয়ংক্রিয়ভাবে লোকালাইজ করতে দেয়। আজই শুরু করুন!