Nested Routing এবং Dynamic Routing ব্যবস্থাপনা

Next.js এর রাউটিং সিস্টেম খুবই শক্তিশালী এবং নমনীয়। এটি Nested Routing এবং Dynamic Routing দুটি ফিচার সাপোর্ট করে, যা আপনাকে কমপ্লেক্স এবং ফ্লেক্সিবল রাউটিং ব্যবস্থা তৈরি করতে সাহায্য করে। এই ফিচারগুলো ব্যবহার করে আপনি সহজেই ডাইনামিক URL পাথ এবং ডাটা-বেসড রাউটিং সিস্টেম তৈরি করতে পারেন।

এখানে Nested Routing এবং Dynamic Routing কিভাবে ব্যবস্থাপনা করা যায়, তা বিস্তারিতভাবে আলোচনা করা হলো।

১. Nested Routing (নেস্টেড রাউটিং)

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

উদাহরণ:

ধরা যাক, আপনি একটি ব্লগ অ্যাপ্লিকেশন তৈরি করছেন এবং সেখানে ব্লগ পোস্টের জন্য একটি নেস্টেড রাউটিং ব্যবস্থা তৈরি করতে চান। আপনি pages/blog/ ফোল্ডারে সাব-পেজ তৈরি করবেন এবং এটি নেস্টেড রাউট হিসেবে কাজ করবে।

Step 1: প্রথমে একটি blog ফোল্ডার তৈরি করুন।

pages/blog/

Step 2: তারপর ফোল্ডারের মধ্যে নতুন একটি ফাইল তৈরি করুন, যেমন index.js।

// pages/blog/index.js
export default function BlogHome() {
  return (
    <div>
      <h1>Blog Home Page</h1>
      <p>Welcome to the blog page!</p>
    </div>
  )
}

এই রাউটটি http://localhost:3000/blog এ অ্যাক্সেস করা যাবে।

Step 3: ব্লগ পোস্টের জন্য একটি নতুন পেজ তৈরি করুন, যেমন [id].js (Dynamic Route)।

// pages/blog/[id].js
import { useRouter } from 'next/router'

export default function BlogPost() {
  const router = useRouter()
  const { id } = router.query // URL থেকে 'id' প্যারামিটার নিয়ে আসা

  return (
    <div>
      <h1>Blog Post {id}</h1>
      <p>This is the blog post with ID: {id}</p>
    </div>
  )
}

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

২. Dynamic Routing (ডাইনামিক রাউটিং)

Next.js ডাইনামিক রাউটিং সিস্টেমে URL প্যারামিটার ব্যবহার করতে পারেন। এটি সাধারণত [param] সিনট্যাক্স ব্যবহার করে করা হয়। যখন আপনি URL প্যারামিটার পরিবর্তন করেন, তখন সেই প্যারামিটার ডাইনামিকভাবে আপনার পেজে রেন্ডার হবে।

উদাহরণ:

ধরা যাক, আপনি একটি ব্লগ অ্যাপ্লিকেশনে বিভিন্ন পোস্ট দেখাতে চান, যেখানে প্রতিটি পোস্টের ID ডাইনামিকভাবে URL থেকে নেয়া হবে।

Step 1: pages/posts/[id].js ফাইল তৈরি করুন।

// pages/posts/[id].js
import { useRouter } from 'next/router'

export default function Post() {
  const router = useRouter()
  const { id } = router.query  // URL প্যারামিটার থেকে 'id' নেয়া

  return (
    <div>
      <h1>Post ID: {id}</h1>
      <p>This is a dynamic post with ID: {id}</p>
    </div>
  )
}

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

৩. Nested Dynamic Routing (নেস্টেড ডাইনামিক রাউটিং)

Next.js এ আপনি নেস্টেড এবং ডাইনামিক রাউটিং একসাথে ব্যবহার করতে পারেন। এতে, আপনি একটি রাউটের মধ্যে আরেকটি ডাইনামিক রাউট রাখবেন। এর ফলে আপনি আরও জটিল এবং লজিক্যাল URL পাথ তৈরি করতে পারবেন।

উদাহরণ:

ধরা যাক, আপনি একটি blog ফোল্ডারের মধ্যে নেস্টেড ডাইনামিক রাউট তৈরি করতে চান, যেখানে প্রতিটি ব্লগ পোস্টের বিস্তারিত দেখানো হবে এবং প্রতিটি পোস্টের জন্য কমেন্টস দেখানো হবে।

Step 1: প্রথমে pages/blog/[id].js ফাইল তৈরি করুন।

// pages/blog/[id].js
import { useRouter } from 'next/router'

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

  return (
    <div>
      <h1>Blog Post {id}</h1>
      <p>Details of the blog post {id}.</p>
    </div>
  )
}

Step 2: এরপর একটি কমেন্ট পেজ তৈরি করুন, [id]/comments.js।

// pages/blog/[id]/comments.js
import { useRouter } from 'next/router'

export default function Comments() {
  const router = useRouter()
  const { id } = router.query

  return (
    <div>
      <h1>Comments for Blog Post {id}</h1>
      <p>These are the comments for blog post {id}.</p>
    </div>
  )
}

এখন আপনি http://localhost:3000/blog/1/comments, http://localhost:3000/blog/2/comments ইত্যাদি URL ব্যবহার করে কমেন্টস পেজটি অ্যাক্সেস করতে পারবেন।

৪. Catch-All Routes (ক্যাচ-অল রাউট)

Next.js এ Catch-All Routes ব্যবহার করে আপনি একাধিক প্যারামিটার একসাথে ক্যাপচার করতে পারেন। এটি [...param] সিনট্যাক্স ব্যবহার করে করা হয়।

উদাহরণ:

ধরা যাক, আপনি একটি pages/blog/[...slug].js ফাইল তৈরি করতে চান, যা অনেকগুলো প্যারামিটার গ্রহণ করবে (যেমন /blog/2021/first-post এবং /blog/2022/second-post)

// pages/blog/[...slug].js
import { useRouter } from 'next/router'

export default function BlogPost() {
  const router = useRouter()
  const { slug } = router.query  // 'slug' একটি অ্যারে হবে

  return (
    <div>
      <h1>Blog Post: {slug.join(' / ')}</h1>
    </div>
  )
}

এখানে, slug একটি অ্যারে হিসেবে গ্রহণ করবে এবং [...slug] ক্যাচ-অল প্যারামিটারটি সমস্ত URL পাথ গ্রহণ করবে।

সারাংশ

Next.js এ Nested Routing এবং Dynamic Routing ব্যবস্থাপনা খুবই সহজ এবং ফ্লেক্সিবল। আপনি pages/ ফোল্ডারে ফাইল এবং সাব-ফোল্ডার তৈরি করে, URL পাথগুলোর সাথে সামঞ্জস্য রেখে রাউটিং পরিচালনা করতে পারেন। এছাড়াও, ডাইনামিক এবং নেস্টেড রাউটিং ম্যানেজমেন্ট Next.js কে আরও শক্তিশালী এবং স্কেলেবল করে তোলে।