M

MLOG

বাংলা

বিশ্বব্যাপী দর্শকদের কাছে পৌঁছানোর জন্য আপনার Next.js অ্যাপ্লিকেশনে কীভাবে নির্বিঘ্ন আন্তর্জাতিকীকরণ (i18n) প্রয়োগ করবেন তা শিখুন। এখানে রাউটিং, কন্টেন্ট অনুবাদ এবং সেরা অনুশীলনগুলি আলোচনা করা হয়েছে।

Next.js আন্তর্জাতিকীকরণ: বিশ্বব্যাপী দর্শকদের জন্য বহু-ভাষিক অ্যাপ তৈরি

আজকের এই সংযুক্ত বিশ্বে, বিশ্বব্যাপী দর্শকদের জন্য অ্যাপ্লিকেশন তৈরি করা আর বিলাসিতা নয় - এটি একটি প্রয়োজনীয়তা। Next.js, একটি শক্তিশালী React ফ্রেমওয়ার্ক, আন্তর্জাতিকীকরণ (i18n) বাস্তবায়নের জন্য শক্তিশালী বৈশিষ্ট্য সরবরাহ করে, যা আপনাকে বিশ্বজুড়ে ব্যবহারকারীদের স্থানীয় অভিজ্ঞতা প্রদানের জন্য বহু-ভাষিক অ্যাপ্লিকেশন তৈরি করতে দেয়। এই বিস্তারিত নির্দেশিকাটি আপনাকে আন্তর্জাতিক মানের Next.js অ্যাপ্লিকেশন তৈরির জন্য প্রয়োজনীয় ধারণা, কৌশল এবং সেরা অনুশীলনগুলির মধ্যে দিয়ে নিয়ে যাবে।

আন্তর্জাতিকীকরণ এবং স্থানীয়করণ বোঝা

Next.js i18n এর নির্দিষ্ট বিবরণে যাওয়ার আগে, আসুন মূল পরিভাষাগুলি স্পষ্ট করে নেওয়া যাক:

মূলত, i18n আপনার অ্যাপ্লিকেশনকে স্থানীয়করণের জন্য প্রস্তুত করে। মূল কোড থেকে ভাষা-নির্ভর উপাদানগুলিকে আলাদা করে, আপনি বিভিন্ন বাজারের জন্য অ্যাপ্লিকেশনটিকে স্থানীয়করণ করা সহজ করে তোলেন।

কেন Next.js-এ আন্তর্জাতিকীকরণ প্রয়োগ করবেন?

আপনার Next.js অ্যাপ্লিকেশনে i18n বাস্তবায়ন করলে অনেক সুবিধা পাওয়া যায়:

Next.js i18n বৈশিষ্ট্য এবং কনফিগারেশন

Next.js তার রাউটিং এবং কন্টেন্ট ম্যানেজমেন্ট বৈশিষ্ট্যগুলির মাধ্যমে i18n-এর জন্য বিল্ট-ইন সমর্থন প্রদান করে। গুরুত্বপূর্ণ বৈশিষ্ট্যগুলির একটি বিবরণ নিচে দেওয়া হলো:

১. next.config.js-এ i18n কনফিগার করা

i18n-এর মূল কনফিগারেশন next.config.js ফাইলের মধ্যে থাকে। এখানে একটি উদাহরণ দেওয়া হলো:


/** @type {import('next').NextConfig} */
const nextConfig = {
  i18n: {
    locales: ['en', 'es', 'fr'], // সমর্থিত লোকেলগুলির একটি অ্যারে (ভাষার কোড)
    defaultLocale: 'en', // ব্যবহার করার জন্য ডিফল্ট লোকেল
    localeDetection: true, // ব্রাউজার সেটিংসের উপর ভিত্তি করে স্বয়ংক্রিয় লোকেল সনাক্তকরণ সক্ষম/অক্ষম করুন (ঐচ্ছিক)
    //  domains: [
    //  {
    //    domain: 'example.com',
    //    defaultLocale: 'en',
    //  },
    //  {
    //    domain: 'example.es',
    //    defaultLocale: 'es',
    //  },
    //  ],
  },
}

module.exports = nextConfig;

ব্যাখ্যা:

২. লোকেল প্রিফিক্স সহ রাউটিং

Next.js স্বয়ংক্রিয়ভাবে রুটের আগে লোকেল যোগ করে। উদাহরণস্বরূপ, যদি আপনার /about-এ একটি পৃষ্ঠা থাকে এবং লোকেলটি 'es' (স্প্যানিশ) হয়, তবে URLটি /es/about হয়ে যাবে। এটি পৃষ্ঠাগুলির বিভিন্ন ভাষার সংস্করণ সক্ষম করে এবং সার্চ ইঞ্জিনগুলিকে প্রতিটি লোকেল-এর জন্য বিষয়বস্তু সূচী করতে সক্ষম করে। ফ্রেমওয়ার্কটি আপনার জন্য পুনঃনির্দেশ এবং রাউটিং পরিচালনা করে।

৩. useRouter হুক ব্যবহার করা

next/router থেকে useRouter হুকটি বর্তমান লোকেল এবং অন্যান্য রাউটিং তথ্যে অ্যাক্সেস সরবরাহ করে।


import { useRouter } from 'next/router';

function MyComponent() {
  const router = useRouter();
  const { locale, locales, defaultLocale } = router;

  return (
    

      
বর্তমান লোকেল: {locale}

      
উপলব্ধ লোকেল: {locales.join(', ')}

      
ডিফল্ট লোকেল: {defaultLocale}

    

  );
}

export default MyComponent;

router অবজেক্টটি নিম্নলিখিত মূল বৈশিষ্ট্যগুলি সরবরাহ করে:

কন্টেন্ট অনুবাদ কৌশল

আপনি একবার আপনার Next.js অ্যাপ্লিকেশনটি i18n-এর জন্য কনফিগার করার পরে, আপনার কন্টেন্ট অনুবাদ করার জন্য কৌশল প্রয়োগ করতে হবে। এখানে কয়েকটি জনপ্রিয় পদ্ধতি রয়েছে:

১. একটি ডেডিকেটেড ট্রান্সলেশন ম্যানেজমেন্ট সিস্টেম (TMS) ব্যবহার করা

অনেক ভাষা সহ বড় আকারের প্রকল্পগুলির জন্য, একটি TMS অত্যন্ত সুপারিশ করা হয়। জনপ্রিয় বিকল্পগুলির মধ্যে রয়েছে:

সুবিধাসমূহ:

২. JSON অনুবাদ ফাইল তৈরি করা

ছোট প্রকল্পগুলির জন্য, অনুবাদ সংরক্ষণের জন্য JSON ফাইল ব্যবহার করা একটি সহজ এবং কার্যকর পদ্ধতি।

উদাহরণ ডিরেক্টরি কাঠামো:


/src
├── locales
│   ├── en.json
│   └── es.json
├── components
│   └── MyComponent.js
└── pages
    └── index.js

উদাহরণ en.json:


{
  "greeting": "Hello, world!",
  "welcomeMessage": "Welcome to our website."
}

উদাহরণ es.json:


{
  "greeting": "¡Hola, mundo!",
  "welcomeMessage": "Bienvenido a nuestro sitio web."
}

উদাহরণ MyComponent.js:


import { useRouter } from 'next/router';
import en from '../locales/en.json';
import es from '../locales/es.json';

function MyComponent() {
  const { locale } = useRouter();
  const t = locale === 'es' ? es : en;

  return (
    

      
{t.greeting}

      
{t.welcomeMessage}

    

  );
}

export default MyComponent;

এই পদ্ধতিটি নমনীয়তা প্রদান করে এবং ছোট প্রকল্পগুলির জন্য সহজ। এটি সাধারণত আপডেট এবং রক্ষণাবেক্ষণ করা সহজ।

৩. একটি অনুবাদ লাইব্রেরি ব্যবহার করা

বেশ কয়েকটি জাভাস্ক্রিপ্ট লাইব্রেরি আপনার React কম্পোনেন্টগুলির মধ্যে কন্টেন্ট অনুবাদকে সহজ করে তোলে।

next-i18next সহ উদাহরণ (ইনস্টলেশন: npm install next-i18next i18next react-i18next):

একটি i18n কনফিগারেশন ফাইল তৈরি করুন (যেমন, আপনার রুট ডিরেক্টরিতে i18n.js):


// i18n.js
import { createServerSideHelpers } from 'next-i18next'
import { i18n } from './next-i18next.config'

export function initI18next(req, res, namespaces = ['common']) {
  const helpers = createServerSideHelpers(
    req, 
    res, 
    i18n, 
    namespaces
  )

  return helpers
}

export { appWithTranslation } from 'next-i18next'
export { i18n }

next-i18next-এর জন্য আপনার Next.js কনফিগারেশন তৈরি করুন।


// next-i18next.config.js
const { i18n } = require('./next-i18next.config');

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  i18n: {
    defaultLocale: 'en',
    locales: ['en', 'es', 'fr'],
  },
  // অন্যান্য কনফিগারেশন
}

module.exports = nextConfig

আপনার _app.js-এ কনফিগারেশন এবং অনুবাদ ইম্পোর্ট যোগ করুন:


import { appWithTranslation } from 'next-i18next';
import '../styles/globals.css';

function MyApp({ Component, pageProps }) {
  return ;
}

export default appWithTranslation(MyApp);

একটি ফোল্ডার তৈরি করুন এবং আপনার অনুবাদের জন্য লোকেলগুলি দিয়ে এটি পূরণ করুন।


/public
└── locales
    ├── en
    │   └── common.json
    ├── es
    │   └── common.json
    └── fr
        └── common.json

উদাহরণ en/common.json:


{
  "greeting": "Hello, world!",
  "welcomeMessage": "Welcome to our website."
}

একটি কম্পোনেন্টে অনুবাদ ব্যবহার করা:


import { useTranslation } from 'next-i18next';

function MyComponent() {
  const { t } = useTranslation('common');

  return (
    

      
{t('greeting')}

      
{t('welcomeMessage')}

    

  );
}

export default MyComponent;

এই উদাহরণটি বর্তমান লোকেল-এর উপর ভিত্তি করে অনুবাদ পুনরুদ্ধার করতে useTranslation হুক ব্যবহার করে।

ডাইনামিক রুট এবং স্ট্যাটিক সাইট জেনারেশন (SSG) পরিচালনা করা

ডাইনামিক রুট (যেমন, ব্লগ পোস্ট, পণ্য পৃষ্ঠা) এবং স্ট্যাটিক সাইট জেনারেশন (SSG) এর সাথে কাজ করার সময় আন্তর্জাতিকীকরণ আরও জটিল হয়ে ওঠে।

১. ডাইনামিক রুট (যেমন, /blog/[slug])

ডাইনামিক রুটের জন্য, আপনাকে getStaticPaths ব্যবহার করে বিল্ড টাইমে প্রতিটি লোকেল-এর জন্য সঠিক পথ তৈরি করতে হবে। এই ফাংশনটি পথের একটি অ্যারে প্রদান করে যা Next.js-কে প্রি-রেন্ডার করা উচিত।


export async function getStaticPaths() {
  const paths = [];
  const locales = ['en', 'es', 'fr'];
  const posts = await fetchPosts(); // ব্লগ পোস্টের ডেটা আনুন

  posts.forEach(post => {
    locales.forEach(locale => {
      paths.push({
        params: {
          slug: post.slug,
        },
        locale,
      });
    });
  });

  return {
    paths,
    fallback: false, // অথবা 'blocking' যদি আপনি লোডিং অবস্থা দেখাতে চান
  };
}

export async function getStaticProps({ params, locale }) {
  const post = await getPostBySlug(params.slug, locale);

  return {
    props: {
      post,
    },
  };
}

ব্যাখ্যা:

২. getStaticProps সহ স্ট্যাটিক সাইট জেনারেশন (SSG)

getStaticProps-এ, আপনি locale প্যারামিটারের উপর ভিত্তি করে অনূদিত কন্টেন্ট আনতে পারেন।


export async function getStaticProps({ params, locale }) {
  // লোকেল এবং প্যারামিটারের উপর ভিত্তি করে কন্টেন্ট আনুন
  const { post } = await getPostBySlug(params.slug, locale);

  return {
    props: {
      post,
    },
  };
}

getPostBySlug ফাংশনটিকে প্রদত্ত slug এবং লোকেল-এর জন্য অনূদিত কন্টেন্ট আনা উচিত, যা আপনার অনুবাদ ফাইল, ডাটাবেস বা একটি CMS থেকে পুনরুদ্ধার করা যেতে পারে।

৩. getServerSideProps সহ সার্ভার-সাইড রেন্ডারিং (SSR)

যে কন্টেন্ট অনুরোধের সময় আনা প্রয়োজন, তার জন্য getServerSideProps ব্যবহার করুন। এটি उपयोगी যদি কন্টেন্ট ঘন ঘন পরিবর্তিত হয় বা প্রতিটি ব্যবহারকারীর জন্য ব্যক্তিগতকৃত হয়।


export async function getServerSideProps({ params, locale, req, res }) {
  // লোকেল এবং প্যারামিটারের উপর ভিত্তি করে ডেটা আনুন (যেমন, একটি ডাটাবেস থেকে)
  const data = await fetchData(params.slug, locale);

  return {
    props: {
      data,
    },
  };
}

Next.js আন্তর্জাতিকীকরণের জন্য সেরা অনুশীলন

এই সেরা অনুশীলনগুলি অনুসরণ করা আপনাকে শক্তিশালী, রক্ষণাবেক্ষণযোগ্য এবং ব্যবহারকারী-বান্ধব বহু-ভাষিক অ্যাপ্লিকেশন তৈরি করতে সাহায্য করবে:

আন্তর্জাতিক মানের ওয়েবসাইটের জন্য এসইও বিবেচনা

সারা বিশ্ব থেকে অর্গানিক ট্র্যাফিক আনার জন্য আপনার আন্তর্জাতিক মানের ওয়েবসাইটকে সার্চ ইঞ্জিনের জন্য অপ্টিমাইজ করা অপরিহার্য। এখানে কিছু মূল এসইও সেরা অনুশীলন রয়েছে:

উদাহরণ: একটি সহজ বহু-ভাষিক ব্লগ তৈরি করা

আসুন Next.js ব্যবহার করে একটি বহু-ভাষিক ব্লগের একটি সরলীকৃত উদাহরণ তৈরি করি। এটি উপরে আলোচিত ধারণাগুলি কীভাবে প্রয়োগ করতে হয় তার একটি আরও বাস্তব চিত্র প্রদান করবে।

১. প্রজেক্ট সেটআপ

একটি নতুন Next.js প্রজেক্ট তৈরি করুন:


npx create-next-app my-multi-lang-blog
cd my-multi-lang-blog

২. i18n কনফিগার করুন (next.config.js)


/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  i18n: {
    locales: ['en', 'es', 'fr'],
    defaultLocale: 'en',
  },
}

module.exports = nextConfig

৩. অনুবাদ ফাইল তৈরি করুন

রুট ডিরেক্টরিতে একটি locales ফোল্ডার তৈরি করুন এবং নিম্নলিখিত JSON ফাইলগুলি যোগ করুন:

locales/en.json:


{
  "title": "Welcome to My Blog",
  "postTitle": "My First Post",
  "postContent": "This is the content of my first blog post."
}

locales/es.json:


{
  "title": "Bienvenido a mi Blog",
  "postTitle": "Mi Primer Post",
  "postContent": "Este es el contenido de mi primer publicación de blog."
}

locales/fr.json:


{
  "title": "Bienvenue sur Mon Blog",
  "postTitle": "Mon Premier Article",
  "postContent": "Ceci est le contenu de mon premier article de blog."
}

৪. ব্লগ পোস্ট কম্পোনেন্ট তৈরি করুন (যেমন, components/BlogPost.js)


import { useRouter } from 'next/router';
import en from '../locales/en.json';
import es from '../locales/es.json';
import fr from '../locales/fr.json';

function BlogPost() {
  const router = useRouter();
  const { locale } = router;

  let translations;
  switch (locale) {
    case 'es':
      translations = es;
      break;
    case 'fr':
      translations = fr;
      break;
    default:
      translations = en;
  }

  return (
    

      
{translations.postTitle}

      
{translations.postContent}

    

  );
}

export default BlogPost;

৫. ইনডেক্স পৃষ্ঠা তৈরি করুন (pages/index.js)


import { useRouter } from 'next/router';
import BlogPost from '../components/BlogPost';
import en from '../locales/en.json';
import es from '../locales/es.json';
import fr from '../locales/fr.json';

function HomePage() {
  const router = useRouter();
  const { locale, locales } = router;

  let translations;
  switch (locale) {
    case 'es':
      translations = es;
      break;
    case 'fr':
      translations = fr;
      break;
    default:
      translations = en;
  }

  return (
    

      
{translations.title}

      
      

        {locales.map((l) => (
          
            {l.toUpperCase()}
          
        ))}
      

    

  );
}

export default HomePage;

এই সরলীকৃত উদাহরণটি Next.js আন্তর্জাতিকীকরণের মৌলিক নীতিগুলি প্রদর্শন করে। আপনি এই মৌলিক কাঠামোর উপর ভিত্তি করে আরও জটিল বৈশিষ্ট্য, যেমন ডাইনামিক রুট এবং অনুবাদ ব্যবস্থাপনা সিস্টেমের সাথে ইন্টিগ্রেশন অন্তর্ভুক্ত করতে পারেন। উপরের লিঙ্কগুলিকে Link কম্পোনেন্ট দিয়ে উন্নত করা এবং উপযুক্ত locale অ্যাট্রিবিউট যোগ করার কথা বিবেচনা করুন।

৬. অ্যাপ্লিকেশনটি চালান

অ্যাপ্লিকেশনটি চালান:


npm run dev

এখন আপনি আপনার ব্লগ http://localhost:3000 (ইংরেজি), http://localhost:3000/es (স্প্যানিশ), এবং http://localhost:3000/fr (ফরাসি) এ অ্যাক্সেস করতে পারেন। আপনার নির্বাচিত লোকেল অনুযায়ী শিরোনাম এবং ব্লগ পোস্টের বিষয়বস্তু অনূদিত দেখতে পাওয়া উচিত।

উপসংহার

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

প্রযুক্তির অগ্রগতির সাথে সাথে, আরও উন্নত i18n বৈশিষ্ট্যগুলি ortaya আসবে বলে আশা করা যায়। বিভিন্ন সংস্কৃতি এবং ভাষাগত গোষ্ঠীর ব্যবহারকারীদের কাছে পৌঁছানোর ক্ষমতা বিশ্বব্যাপী অ্যাপ্লিকেশন ডেভেলপারদের জন্য একটি মূল অগ্রাধিকার হিসাবে থাকবে। অতএব, i18n-এর মৌলিক বিষয়গুলিতে দক্ষতা অর্জন একটি মূল্যবান দক্ষতা যা আজকের বিশ্বব্যাপী উন্নয়ন ক্ষেত্রে আপনার মূল্য বাড়িয়ে তুলবে।