Routing কী এবং কিভাবে কাজ করে?

Next.js একটি React ফ্রেমওয়ার্ক যা খুব সহজে এবং কার্যকরভাবে রাউটিং (Routing) পরিচালনা করতে সক্ষম। Next.js এর রাউটিং সিস্টেম মূলত ফাইল-ভিত্তিক (File-based Routing) এবং এটি স্বয়ংক্রিয়ভাবে কাজ করে। আপনি যেভাবে ফাইল তৈরি করবেন, সেভাবেই রাউট তৈরি হয়, এবং আপনি কোনো অতিরিক্ত কনফিগারেশন বা কোডিং করতে হয় না।

এটি React রাউটিংয়ের একটি অত্যন্ত সহজ এবং সোজা উপায় প্রদান করে, যেখানে URL এর সাথে সম্পর্কিত ফাইল এবং ডিরেক্টরি স্ট্রাকচার স্বয়ংক্রিয়ভাবে রাউটিং তৈরি করে।

Routing কী?

রাউটিং হল ওয়েব অ্যাপ্লিকেশনের এমন একটি প্রক্রিয়া, যার মাধ্যমে ইউজারের ইন্টারঅ্যাকশন (যেমন URL এ পরিবর্তন) অনুসারে সঠিক পেজ বা কম্পোনেন্ট লোড করা হয়। Next.js এর রাউটিং সিস্টেম আপনাকে এই কাজটি খুব সহজে করতে সহায়তা করে, কারণ এখানে রাউটিং মূলত ফাইল সিস্টেমের উপর নির্ভরশীল।

Next.js এর রাউটিং এর কাজ করার পদ্ধতি

Next.js এর রাউটিং ফিচার ফাইল-বেসড রাউটিং (File-based Routing) নামে পরিচিত, যার মাধ্যমে আপনি pages/ ডিরেক্টরিতে ফাইল তৈরি করে একটি রাউট তৈরি করতে পারেন।

Pages Directory

Next.js একটি ফোল্ডার pages/ তৈরি করে, এবং সেখানে প্রতিটি JavaScript বা TypeScript ফাইল একটি রাউট হিসেবে কাজ করে। pages/ ফোল্ডারের মধ্যে তৈরি করা প্রতিটি ফাইল স্বয়ংক্রিয়ভাবে URL এর সাথে সম্পর্কিত হয়।

রাউটিং এর উদাহরণ

১. হোম পেজ

Next.js একটি ডিফল্ট index.js ফাইল তৈরি করে, যা আপনার হোম পেজ হিসেবে কাজ করে। এই ফাইলটির মাধ্যমে / রুটে রিকোয়েস্ট হলে এই পেজটি রেন্ডার হবে।

pages/index.js:

import React from 'react';

function HomePage() {
  return (
    <div>
      <h1>স্বাগতম! এটি আমার প্রথম Next.js অ্যাপ</h1>
    </div>
  );
}

export default HomePage;

এখন, আপনি http://localhost:3000 এ গিয়ে হোম পেজ দেখতে পারবেন।

২. নতুন পেজ তৈরি করা

আপনি যদি নতুন একটি পেজ তৈরি করতে চান, তাহলে pages/ ফোল্ডারে নতুন একটি ফাইল তৈরি করতে হবে। যেমন about.js পেজ তৈরি করলে, সেটি স্বয়ংক্রিয়ভাবে /about রুটের সাথে সম্পর্কিত হবে।

pages/about.js:

import React from 'react';

function AboutPage() {
  return (
    <div>
      <h1>এটি একটি About পেজ</h1>
      <p>এখানে অ্যাপের সম্পর্কে বিস্তারিত তথ্য থাকবে।</p>
    </div>
  );
}

export default AboutPage;

এখন, আপনি http://localhost:3000/about এ গিয়ে এই পেজটি দেখতে পাবেন।

৩. ডাইনামিক রাউটিং

Next.js ডাইনামিক রাউটিংও সাপোর্ট করে, যার মাধ্যমে আপনি রাউটের URL প্যারামিটারগুলো ব্যবহার করতে পারবেন। এটি করতে হলে, pages/ ফোল্ডারের মধ্যে আপনি ফাইল নামের মধ্যে [] ব্যবহার করবেন। উদাহরণস্বরূপ, যদি আপনি একটি পেজ তৈরি করতে চান যেখানে URL প্যারামিটার হিসেবে id ব্যবহার হবে, তাহলে আপনি [id].js ফাইল তৈরি করবেন।

pages/posts/[id].js:

import { useRouter } from 'next/router';

function PostPage() {
  const router = useRouter();
  const { id } = router.query;

  return (
    <div>
      <h1>পোস্টের আইডি: {id}</h1>
      <p>এটি একটি ডাইনামিক পেজ যেখানে URL থেকে আইডি পাঠানো হয়।</p>
    </div>
  );
}

export default PostPage;

এখন, আপনি http://localhost:3000/posts/1, http://localhost:3000/posts/2 ইত্যাদি URL থেকে ডাইনামিক পেজের কনটেন্ট দেখতে পারবেন।

৪. Nested Routing

Next.js এ আপনি nested routes (অর্থাৎ, সাব-পেজ) তৈরি করতে পারেন ফোল্ডার স্ট্রাকচার ব্যবহার করে। উদাহরণস্বরূপ, যদি আপনি /blog রুটের অধীনে বিভিন্ন পেজ রাখতে চান, তাহলে আপনি pages/blog/ ফোল্ডারে পেজ ফাইলগুলো রাখতে পারবেন।

pages/blog/index.js:

import React from 'react';

function BlogHome() {
  return (
    <div>
      <h1>Blog হোম পেজ</h1>
      <p>এখানে ব্লগের প্রথম পেজ দেখানো হবে।</p>
    </div>
  );
}

export default BlogHome;

এখন, http://localhost:3000/blog এ গিয়ে ব্লগের হোম পেজটি দেখতে পারবেন।

pages/blog/[id].js:

import { useRouter } from 'next/router';

function BlogPost() {
  const router = useRouter();
  const { id } = router.query;

  return (
    <div>
      <h1>ব্লগ পোস্টের আইডি: {id}</h1>
      <p>এখানে ব্লগ পোস্টের বিস্তারিত তথ্য থাকবে।</p>
    </div>
  );
}

export default BlogPost;

এখন, আপনি http://localhost:3000/blog/1, http://localhost:3000/blog/2 ইত্যাদি URL থেকে ব্লগ পোস্টের তথ্য দেখতে পারবেন।

৫. Linking Between Pages (পেজের মধ্যে লিঙ্কিং)

Next.js এর Link কম্পোনেন্ট ব্যবহার করে আপনি বিভিন্ন পেজের মধ্যে নেভিগেট করতে পারেন। এটি React Router এর মতো কাজ করে, কিন্তু আরও কার্যকরী এবং পারফর্ম্যান্স অপটিমাইজড।

import Link from 'next/link';

function HomePage() {
  return (
    <div>
      <h1>স্বাগতম!</h1>
      <Link href="/about">
        <a>About পেজে যান</a>
      </Link>
    </div>
  );
}

export default HomePage;

এখানে Link কম্পোনেন্টের মাধ্যমে আপনি /about রুটে নেভিগেট করতে পারবেন।

সারাংশ

Next.js এর রাউটিং সিস্টেম খুবই সহজ এবং স্বয়ংক্রিয়ভাবে কাজ করে। আপনি pages/ ডিরেক্টরির মধ্যে ফাইল তৈরি করে রাউট তৈরি করতে পারেন এবং ডাইনামিক, নেস্টেড, এবং লিঙ্কিং এর মাধ্যমে সাইটের মধ্যে সহজেই নেভিগেট করতে পারেন। Next.js এর ফাইল-ভিত্তিক রাউটিং সিস্টেম একটি শক্তিশালী এবং ডেভেলপমেন্টের জন্য সময় সাশ্রয়ী পদ্ধতি প্রদান করে।