Next.js রাউটিং সিস্টেমে Catch-all Routes এবং Optional Catch-all Routes ব্যবহার করে আপনি ডাইনামিক রাউটিংয়ের মাধ্যমে খুব সহজেই বিভিন্ন ধরনের পেজ তৈরি করতে পারেন। এই ধরনের রাউটিংয়ে, আপনি URL প্যারামিটারগুলোকে এক বা একাধিক ভ্যালু গ্রহণ করার মতো ফ্লেক্সিবলভাবে কনফিগার করতে পারেন।
নিচে Catch-all Routes এবং Optional Catch-all Routes এর ব্যবহার বিস্তারিতভাবে আলোচনা করা হলো।
Catch-all Routes
Catch-all Routes আপনাকে একটি পেজ তৈরি করতে সাহায্য করে যা একাধিক প্যারামিটার গ্রহণ করতে পারে। এই ধরনের রাউটিং আপনাকে প্যারামিটারগুলো ক্যাপচার করতে এবং একাধিক ডাইনামিক পেজ তৈরি করতে দেয়।
কিভাবে কাজ করে:
Catch-all route একটি প্যারামিটারকে একাধিক ভ্যালু গ্রহণের জন্য ব্যবহৃত হয়। আপনি এটি [] ব্র্যাকেটে একটি ... এর মাধ্যমে ইমপ্লিমেন্ট করেন।
উদাহরণ:
ধরা যাক, আপনি একটি ব্লগ পেজ তৈরি করতে চান যেখানে একাধিক পোস্টের আইডি এবং ক্যাটেগরি থাকবে। আপনি একটি Catch-all route তৈরি করতে পারেন যেটি categories/[...slug].js নামে হবে।
// pages/categories/[...slug].js
import { useRouter } from 'next/router'
export default function Category() {
const router = useRouter()
const { slug } = router.query
return (
<div>
<h1>Category Page</h1>
<p>Slug: {slug ? slug.join(', ') : 'No category selected'}</p>
</div>
)
}
এখানে slug প্যারামিটারটি একটি অ্যারে হবে, এবং যেকোনো সংখ্যা অথবা কম্বিনেশন নেওয়া যাবে, যেমন:
/categories/technology/categories/technology/web-development/categories/technology/web-development/react
ব্যাখ্যা:
[...slug].js: এই ফাইলটি catch-all route হিসেবে কাজ করে, যেখানেslugপ্যারামিটারটি বিভিন্ন ভ্যালু গ্রহণ করতে পারে।slug.join(', '): যদি একাধিক ভ্যালু থাকে, তাহলে তাদের একটি অ্যারে হিসেবে প্রক্রিয়া করা হয় এবং একত্রিত করা হয়।
Optional Catch-all Routes
Optional Catch-all Routes Catch-all Routes এর মতোই কাজ করে, তবে এখানে একটি পার্থক্য হলো: আপনি চাইলে কিছু অংশ বাদ দিতে পারেন। অর্থাৎ, URL এ কিছু প্যারামিটার না থাকলেও সেই রাউটটি কাজ করবে। এটি [[...param]].js ফাইলের মাধ্যমে ইমপ্লিমেন্ট করা হয়।
কিভাবে কাজ করে:
যতটুকু প্যারামিটার দেওয়া হয়, ততটুকু রাউট কাজ করবে, এবং যদি কোন প্যারামিটার না দেওয়া হয়, তাও সেই রাউটটি কাজ করবে।
উদাহরণ:
ধরা যাক, আপনি একটি পেজ তৈরি করতে চান যেখানে বিভিন্ন পোস্টের ক্যাটেগরি দেখানো হবে, এবং ক্যাটেগরি ছাড়াও একটি ডিফল্ট পেজ থাকবে। আপনি [[...slug]].js নামক একটি ফাইল ব্যবহার করতে পারেন।
// pages/categories/[[...slug]].js
import { useRouter } from 'next/router'
export default function Category() {
const router = useRouter()
const { slug } = router.query
if (slug) {
return (
<div>
<h1>Category: {slug.join(' > ')}</h1>
</div>
)
}
return (
<div>
<h1>All Categories</h1>
<p>Here are all the categories</p>
</div>
)
}
ব্যাখ্যা:
[[...slug]].js: এখানেslugপ্যারামিটারটি Optional। অর্থাৎ, যদিslugনা থাকে, তাহলে ডিফল্ট পেজটি রেন্ডার হবে, এবং যদিslugথাকে, তাহলে সেই অনুযায়ী পেজ রেন্ডার হবে।slug.join(' > '): যদি একাধিক প্যারামিটার থাকে, তাহলে সেগুলো একটি স্ট্রিংয়ে যুক্ত হবে।
এটি দুটি পরিস্থিতি সমর্থন করে:
/categories/technology/categories
Catch-all এবং Optional Catch-all Routes এর মধ্যে পার্থক্য
| ফিচার | Catch-all Routes | Optional Catch-all Routes |
|---|---|---|
| প্যারামিটার ম্যান্ডেটরি | সব প্যারামিটার থাকা উচিত | প্যারামিটার থাকতে পারে, নাও থাকতে পারে |
| রাউটিং কনফিগারেশন | [...param].js | [[...param]].js |
| রাউটের নমনীয়তা | শুধুমাত্র প্যারামিটার থাকতে পারে | প্যারামিটার থাকতে বা নাও থাকতে পারে |
| রাউটের ব্যবহার | একাধিক প্যারামিটার বা সেগুলোর কম্বিনেশন | একটি বা কোনো প্যারামিটার নাও থাকতে পারে |
সারাংশ
- Catch-all Routes: এই রাউটটি একাধিক প্যারামিটারকে গ্রহণ করতে সক্ষম এবং প্রতিটি প্যারামিটারকে ক্যাপচার করে।
- Optional Catch-all Routes: এই রাউটটি একইভাবে কাজ করে, তবে এটি প্যারামিটার দেয়া বা না দেয়ার ক্ষেত্রে নমনীয়তা প্রদান করে।
এই রাউটিং পদ্ধতিগুলি ব্যবহার করে আপনি ডাইনামিক রাউটিং এবং ইউজার কাস্টমাইজড রাউটিং খুব সহজে পরিচালনা করতে পারেন Next.js এর মাধ্যমে।
Read more
