Next.js একটি React ভিত্তিক ফ্রেমওয়ার্ক, যা স্বয়ংক্রিয়ভাবে পেজ রাউটিং সিস্টেম প্রদান করে। Next.js এর পেজ রাউটিং অত্যন্ত সহজ এবং স্বাভাবিক। এটি এমনভাবে ডিজাইন করা হয়েছে যাতে আপনি শুধুমাত্র pages/ ফোল্ডারে ফাইল তৈরি করে URL রাউটিং সেট করতে পারেন।
এখানে Next.js এর পেজ রাউটিং কী এবং এটি কিভাবে কাজ করে তা বিস্তারিতভাবে আলোচনা করা হলো।
পেজ রাউটিং কী?
পেজ রাউটিং হল এমন একটি প্রক্রিয়া যার মাধ্যমে ওয়েব পেজগুলো URL এর মাধ্যমে অ্যাক্সেস করা হয়। Next.js এর ক্ষেত্রে, পেজ রাউটিং স্বয়ংক্রিয়ভাবে কাজ করে, অর্থাৎ আপনি একটি ফাইল তৈরি করলে সেটি স্বয়ংক্রিয়ভাবে একটি রাউট হিসেবে কাজ করতে শুরু করে।
যখন আপনি pages/ ফোল্ডারে একটি নতুন JavaScript (বা TypeScript) ফাইল তৈরি করেন, Next.js সেটি একটি রাউট হিসেবে চিনে নেয় এবং আপনাকে সেই URL এর মাধ্যমে সেই পেজ অ্যাক্সেস করতে দেয়।
কিভাবে কাজ করে Next.js এর পেজ রাউটিং?
Next.js এর পেজ রাউটিং খুবই সোজা। এটি ফাইল সিস্টেম ভিত্তিক রাউটিং ব্যবহার করে। এর মানে হল যে pages/ ফোল্ডারের প্রতিটি ফাইল একটি URL রাউটকে প্রতিনিধিত্ব করে। নীচে এর কিছু উদাহরণ এবং ব্যাখ্যা দেওয়া হলো।
১. ডিফল্ট পেজ রাউটিং
যখন আপনি pages/ ফোল্ডারে একটি ফাইল তৈরি করেন, এটি স্বয়ংক্রিয়ভাবে URL রাউট হিসেবে কাজ করে।
উদাহরণ:
pages/index.js→ রাউট:/- এটি অ্যাপের হোম পেজ। আপনি যখন
http://localhost:3000/এ যান, এটিindex.jsপেজ রেন্ডার করবে।
- এটি অ্যাপের হোম পেজ। আপনি যখন
pages/about.js→ রাউট:/about- যদি আপনি
about.jsফাইলটিpages/ফোল্ডারে তৈরি করেন, তবে এটিhttp://localhost:3000/aboutএই URL এর মাধ্যমে এক্সেস করা যাবে।
- যদি আপনি
২. ডাইনামিক রাউটিং
Next.js ডাইনামিক রাউটিং সমর্থন করে, অর্থাৎ আপনি চাইলে URL প্যারামিটার হিসেবে ভেরিয়েবল ব্যবহার করতে পারেন। এর জন্য ফাইলের নামের মধ্যে [] চিহ্ন ব্যবহার করতে হবে। এতে সেই পেজটি ডাইনামিক রাউট হিসেবে কাজ করবে।
উদাহরণ:
pages/posts/[id].js→ রাউট:/posts/:id- এখানে,
[id].jsপেজটিhttp://localhost:3000/posts/1বাhttp://localhost:3000/posts/2এই ধরনের ডাইনামিক রাউটের জন্য ব্যবহৃত হবে।
- এখানে,
এখানে id একটি প্যারামিটার যা আপনি কোডের মধ্যে ব্যবহার করতে পারবেন। উদাহরণস্বরূপ:
// pages/posts/[id].js
import { useRouter } from 'next/router'
const Post = () => {
const router = useRouter()
const { id } = router.query
return <p>Post ID: {id}</p>
}
export default Post
এই কোডে router.query.id দ্বারা URL প্যারামিটার id এর মান অ্যাক্সেস করা হবে এবং তা পেজে রেন্ডার করা হবে।
৩. নেস্টেড রাউটিং (Nested Routing)
Next.js পেজ রাউটিং সিস্টেমে নেস্টেড (nested) রাউটিংও সহজে করা যায়। আপনি যদি pages/ ফোল্ডারে কোনো সাব-ফোল্ডার তৈরি করেন, তবে সেই সাব-ফোল্ডারের ফাইলগুলোও রাউট হিসেবে কাজ করবে।
উদাহরণ:
pages/blog/index.js→ রাউট:/blogpages/blog/ফোল্ডারের মধ্যে থাকাindex.jsফাইলটি/blogরাউটের জন্য ব্যবহৃত হবে।
pages/blog/[slug].js→ রাউট:/blog/:slug- যদি আপনি
[slug].jsফাইলটিpages/blog/ফোল্ডারে রাখেন, তাহলে এটি/blog/some-postবা/blog/another-postরাউটের জন্য ব্যবহৃত হবে।
- যদি আপনি
৪. পেজ পিডিং (Page Preloading)
Next.js স্বয়ংক্রিয়ভাবে পেজ পিডিং (preloading) এর মাধ্যমে রাউট পরিবর্তন হওয়ার আগেই পরবর্তী পেজের জন্য ডাটা লোড করে নেয়। এই ফিচারটি পেজ লোডিংকে দ্রুত এবং কার্যকর করে।
৫. 404 পেজ
Next.js একটি কাস্টম 404 পেজ তৈরি করার সুবিধাও দেয়। আপনি pages/404.js ফাইল তৈরি করলে সেটি ওয়েবসাইটে ভুল URL এ গেলে দেখানো হবে।
উদাহরণ:
// pages/404.js
const Custom404 = () => {
return <h1>404 - Page Not Found</h1>
}
export default Custom404
এটি http://localhost:3000/some-non-existent-page এই ধরনের ভুল URL এ গিয়ে কাস্টম 404 পেজটি প্রদর্শন করবে।
সারাংশ
Next.js এর পেজ রাউটিং একটি স্বয়ংক্রিয় এবং সহজ প্রক্রিয়া। আপনি যখন pages/ ফোল্ডারে নতুন ফাইল তৈরি করেন, Next.js সেটি একটি রাউট হিসেবে ব্যবহার করবে। ডাইনামিক রাউটিং, নেস্টেড রাউটিং, এবং কাস্টম 404 পেজ সমর্থন সহ এটি আপনার অ্যাপ্লিকেশনের রাউটিং প্রক্রিয়াকে অত্যন্ত সহজ এবং কার্যকর করে তোলে।
