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

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

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

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

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

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

আপনার Next.js অ্যাপ্লিকেশনে আন্তর্জাতিকীকরণ প্রয়োগ করতে, আমরা প্রথমে একটি 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!