Nested Routes এবং File-based Routing গাইড ও নোট

Next.js এর রাউটিং সিস্টেম খুবই সহজ এবং শক্তিশালী। এটি File-based Routing ব্যবহার করে, যা ডেভেলপারদের রাউটিং সেটআপ করতে আরও সহজ এবং পরিষ্কার উপায় প্রদান করে। এছাড়া, Next.js ডাইনামিক রাউটিং এবং Nested Routes (নেস্টেড রাউট) সমর্থন করে, যা আপনার অ্যাপ্লিকেশনের মধ্যে জটিল রাউটিং কাঠামো তৈরি করতে সহায়তা করে।

১. File-based Routing

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

কীভাবে কাজ করে:

• pages/ ফোল্ডারের ফাইল: প্রতিটি .js (বা .tsx) ফাইল একটি রাউটের সাথে সম্পর্কিত।
• index.js: এটি / রাউটের জন্য।
• about.js: এটি /about রাউটের জন্য।
• [param].js: এটি ডাইনামিক রাউটিং-এর জন্য, যেখানে param ভেরিয়েবল হতে পারে যেকোনো URL প্যারামিটার।

উদাহরণ:

pages/
├── index.js        // হোম পেজ ("/")
├── about.js        // About পেজ ("/about")
└── posts/
    ├── index.js    // Posts পেজ ("/posts")
    └── [id].js     // Dynamic route for individual post ("/posts/:id")

এখানে index.js হলো হোম পেজ, about.js হলো /about পেজ, এবং posts/[id].js হলো ডাইনামিক রাউট যা /posts/1, /posts/2 ইত্যাদি URL-এর জন্য ব্যবহৃত হবে।

২. Nested Routes

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

উদাহরণ:

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

pages/
├── index.js        // হোম পেজ ("/")
├── blog/
│   ├── index.js    // ব্লগ পেজ ("/blog")
│   └── [id].js     // ব্লগ পোস্টের পেজ ("/blog/:id")
└── about.js        // About পেজ ("/about")

এখানে blog/ ফোল্ডারটি একটি নেস্টেড রাউট তৈরি করছে:

• pages/blog/index.js — এটি /blog রাউটের জন্য।
• pages/blog/[id].js — এটি /blog/:id ডাইনামিক রাউটের জন্য, যেখানে :id যেকোনো পোস্ট আইডি হতে পারে (যেমন /blog/1, /blog/2 ইত্যাদি)।

এভাবে, আপনি সহজেই নেস্টেড রাউট তৈরি করতে পারেন এবং কমপ্লেক্স অ্যাপ্লিকেশনগুলো ম্যানেজ করতে পারবেন।

৩. Dynamic Routes (ডাইনামিক রাউটস)

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

উদাহরণ:

pages/posts/[id].js ফাইলটি একটি ডাইনামিক রাউট তৈরি করে, যেখানে id URL প্যারামিটার হবে। এর মাধ্যমে আপনি posts/1, posts/2 ইত্যাদি রাউট ব্যবহার করতে পারবেন।

// pages/posts/[id].js

import { useRouter } from 'next/router';

const Post = () => {
  const router = useRouter();
  const { id } = router.query;

  return <div>Post ID: {id}</div>;
}

export default Post;

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

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

Next.js তে Catch-all Routes তৈরি করা সম্ভব, যার মাধ্যমে আপনি একটি রাউটকে একাধিক প্যারামিটার বা নেস্টেড রাউটের জন্য ধরতে পারেন।

উদাহরণ:

pages/posts/[...slug].js ফাইলটি সব ধরনের সাব-পেজের জন্য একটি ক্যাচ-অল রাউট তৈরি করবে।

pages/posts/[...slug].js

এটি http://localhost:3000/posts/1, http://localhost:3000/posts/2024/tech ইত্যাদি সব ধরনের URL রাউটের জন্য কাজ করবে, এবং URL এর প্যারামিটারগুলো slug হিসাবে অ্যাক্সেস করা যাবে।

// pages/posts/[...slug].js

import { useRouter } from 'next/router';

const Post = () => {
  const router = useRouter();
  const { slug } = router.query;

  return <div>Post Slug: {slug}</div>;
}

export default Post;

এতে, slug এ URL প্যারামিটার হিসেবে সব ভ্যালু পাওয়া যাবে।

সারাংশ

Next.js এর রাউটিং সিস্টেম বেশ শক্তিশালী এবং সহজে ব্যবহারযোগ্য। File-based routing এর মাধ্যমে আপনি সরাসরি ফাইলের নাম অনুযায়ী রাউট তৈরি করতে পারেন, এবং Nested Routes ও Dynamic Routes এর মাধ্যমে জটিল রাউটিং কাঠামো তৈরি করতে পারেন। এছাড়া, Catch-all Routes এর মাধ্যমে আপনার অ্যাপ্লিকেশনে আরো উন্নত রাউটিং ফিচার যুক্ত করতে পারেন।