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

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

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

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

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

step 1: একটি 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 থাকে, তাহলে অনুগ্রহ করে উপরের বৈশিষ্ট্য এবং কোডের সাথে সংজ্ঞাটি সম্প্রসারণ করুন।

Step 4: সার্ভার সাইড রেন্ডারিং বাস্তবায়ন করা হচ্ছে

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 কম্পোনেন্টে নতুন স্ট্রিং যুক্ত করবেন। লক্ষ্য করুন যে শুধুমাত্র সেই পরিবেশগুলো, যাদের read/write অনুমতি আছে API কী-তে, নতুন অনূদিত স্ট্রিং তৈরি করতে সক্ষম হবে। আমরা সুপারিশ করি একটি বন্ধ এবং সুরক্ষিত স্টেজিং পরিবেশ রাখার যেখানে আপনি আপনার প্রোডাকশন অ্যাপ্লিকেশনটি এই ধরনের 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!