Next.js-এ রাউটিং ব্যবস্থাপনা অত্যন্ত সহজ এবং শক্তিশালী, তবে কখনও কখনও আপনি complex routing বা nested pages তৈরি করতে চান, যেখানে পেজগুলির মধ্যে সম্পর্ক থাকে এবং ডাইনামিক রাউটিং, প্যারামিটার ব্যবহার করতে হয়। এমন পরিস্থিতিতে সঠিক রাউটিং কৌশল এবং ডিরেক্টরি স্ট্রাকচার বজায় রাখা গুরুত্বপূর্ণ।
এই টিউটোরিয়ালে, আমরা complex routing এবং nested pages তৈরি করার জন্য কিছু সেরা প্র্যাকটিস নিয়ে আলোচনা করব।
১. Dynamic Routes এবং Nested Routes ব্যবহারের মাধ্যমে Complex Routing
Next.js-এ dynamic routes তৈরি করা সহজ, এবং আপনি পেজের নাম এবং প্যারামিটার ভিত্তিতে রাউটিং করতে পারেন। আপনি ডাইনামিক ফাইল নামের মাধ্যমে ডাইনামিক রাউটিং সেটআপ করতে পারেন, যা আপনার অ্যাপ্লিকেশনে nested pages এর জন্য খুবই উপকারী।
উদাহরণ: Nested Pages এবং Dynamic Routing
ধরা যাক, আপনার একটি ব্লগ অ্যাপ্লিকেশন রয়েছে এবং আপনি প্রতি পোস্টের জন্য আলাদা পেজ তৈরি করতে চান। এছাড়াও, আপনি category ভিত্তিক পেজ তৈরি করতে চান।
- Pages ডিরেক্টরির মধ্যে Nested ফোল্ডার তৈরি করা:
/pagesডিরেক্টরির মধ্যে আপনি category নামে একটি ফোল্ডার তৈরি করুন, এবং তার মধ্যে [id].js ফাইল যুক্ত করুন। এছাড়াও, ব্লগ পোস্টের জন্য একটি ডাইনামিক পেজ তৈরি করুন।
/pages
/posts
[id].js # Dynamic post page
/category
[category].js # Dynamic category page
- ডাইনামিক রাউটিং:
[id].js এবং [category].js ফাইল দুটি ডাইনামিক রাউটিংয়ের জন্য ব্যবহৃত হবে।
// pages/posts/[id].js
import { useRouter } from 'next/router'
export default function PostPage() {
const router = useRouter()
const { id } = router.query // 'id' হচ্ছে URL প্যারামিটার
return <div>Post ID: {id}</div>
}
// pages/category/[category].js
import { useRouter } from 'next/router'
export default function CategoryPage() {
const router = useRouter()
const { category } = router.query // 'category' হচ্ছে URL প্যারামিটার
return <div>Category: {category}</div>
}
ব্যাখ্যা:
- [id].js এবং [category].js ফাইলগুলোর মাধ্যমে আপনি ডাইনামিক রাউটিং সেটআপ করেছেন, যেখানে
idএবংcategoryহল URL প্যারামিটার। useRouter()হুক ব্যবহার করে আপনি রাউটিং প্যারামিটার অ্যাক্সেস করতে পারেন।
২. File-based Routing এর সুবিধা
Next.js-এ file-based routing ব্যবহৃত হয়, যেখানে /pages ডিরেক্টরির ফাইলগুলোই স্বয়ংক্রিয়ভাবে রাউট তৈরি করে। এই সিস্টেমটি খুবই সহজ এবং দ্রুত, কিন্তু যখন আপনি complex routing বা nested pages চান, তখন আপনাকে রাউটের স্তর বাড়ানোর জন্য ডিরেক্টরি স্ট্রাকচারকে সুসংগঠিত রাখতে হবে।
উদাহরণ: নেস্টেড ফোল্ডার
ধরা যাক, আপনি User Profile এবং User Settings পেজ তৈরি করতে চান, যেখানে ব্যবহারকারী লগইন করে তার প্রোফাইল এবং সেটিংস পেজে যাবে।
/pages
/user
index.js # User Dashboard
profile.js # User Profile
settings.js # User Settings
এইভাবে, /user/profile এবং /user/settings রাউটগুলো স্বয়ংক্রিয়ভাবে তৈরি হবে।
// pages/user/profile.js
export default function UserProfile() {
return <div>User Profile Page</div>
}
// pages/user/settings.js
export default function UserSettings() {
return <div>User Settings Page</div>
}
৩. Catch-all Routes এবং Nested Dynamic Routes
Next.js-এ catch-all routes ব্যবহার করে আপনি এমন রাউট তৈরি করতে পারেন যা একাধিক প্যারামিটার গ্রহণ করে। এই পদ্ধতিটি nested dynamic routes তৈরির জন্য খুবই উপকারী, যেখানে একাধিক স্তরে ডাইনামিক পেজ থাকতে পারে।
উদাহরণ: Catch-all Routes
/pages
/products
[category]
[subCategory].js
এখানে, category এবং subCategory উভয়টি ডাইনামিক প্যারামিটার হবে।
// pages/products/[category]/[subCategory].js
import { useRouter } from 'next/router'
export default function ProductPage() {
const router = useRouter()
const { category, subCategory } = router.query
return (
<div>
<h1>Category: {category}</h1>
<h2>Subcategory: {subCategory}</h2>
</div>
)
}
ব্যাখ্যা:
[category]এবং[subCategory]প্যারামিটার ডাইনামিকভাবে URL থেকে আসবে এবং catch-all routes ব্যবহার করে সেগুলি রিডাইরেক্ট করা হবে।
৪. Linking এবং Nested Navigations
Next.js-এ Link কম্পোনেন্ট ব্যবহার করে আপনি পেজগুলোর মধ্যে নেভিগেট করতে পারেন। যখন আপনি complex বা nested রাউট তৈরি করেন, তখন Link কম্পোনেন্টের মাধ্যমে সহজেই নেভিগেশন করতে পারবেন।
উদাহরণ:
import Link from 'next/link'
export default function UserDashboard() {
return (
<div>
<h1>User Dashboard</h1>
<ul>
<li>
<Link href="/user/profile">Go to Profile</Link>
</li>
<li>
<Link href="/user/settings">Go to Settings</Link>
</li>
</ul>
</div>
)
}
এখানে, Link কম্পোনেন্ট ব্যবহার করে আপনি সহজেই nested pages এর মধ্যে নেভিগেট করতে পারবেন।
৫. Best Practices for Complex Routing
- Folder Structure: আপনার রাউটগুলোকে logical এবং organized রাখতে ফোল্ডার ভিত্তিক রাউটিং ব্যবহার করুন। Nested ফোল্ডার ব্যবহার করে রাউটের স্তর পরিষ্কার করুন।
- Dynamic Routing: প্রয়োজনীয় ক্ষেত্রে dynamic routes ব্যবহার করুন, যেমন প্যারামিটার এবং ক্যাটাগরি ভিত্তিক রাউটিং।
- Clean URLs: রাউটের URL গুলি সহজ এবং পরিষ্কার রাখুন, যাতে ইউজার এবং সার্চ ইঞ্জিনগুলো সেগুলি সহজে বুঝতে পারে।
- Nested Routing: যখন একাধিক পেজ একই ধরনের কনটেন্ট শেয়ার করে (যেমন user profile, settings), তখন nested routing ব্যবহার করুন।
এই সেরা প্র্যাকটিসগুলো অনুসরণ করলে, আপনি Next.js-এ complex routing এবং nested pages তৈরি করতে পারবেন, যা আপনার অ্যাপ্লিকেশনকে আরও স্কেলেবল এবং ম্যানেজেবল করবে।
Read more
