Reactive Accelerator
1.3 - Defining Routes

Next.js-এ রাউট ডিফাইন করা

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

visual explanation

রাউট তৈরি করা:

Next.js-এ একটি page.js বা page.tsx ফাইল ব্যবহার করে রাউট তৈরি করা হয়। এই পেজে যেই কন্টেন্ট থাকবে সেটিই হবে এই রাউটের কন্টেন্ট। যদি রাউটসেগমেন্টগুলোতে কোন page.js বা page.tsx ফাইল না থাকে, তাহলে রাউট তৈরি হবেনা। এখানে,

  • প্রতিটি ফোল্ডার একটি রাউট সেগমেন্টকে প্রতিনিধিত্ব করে।
  • Nested Routes: ভেতরে ফোল্ডার নেস্ট করে রাউটগুলোকে আরও nested করা যায়।

উদাহরণ:

/dashboard/analytics রাউট

যদি dashboard বা analytics ফোল্ডারে কোনো page.js ফাইল না থাকে, তবে সেই রাউট পাবলিকলি অ্যাক্সেস করা যাবেনা।
তবে এই ফোল্ডারগুলোতে আপনি অন্যান্য ফাইল (যেমন: কম্পোনেন্ট, CSS ফাইল, ইমেজ) রাখতে পারবেন।

নোট:

  • .js, .jsx, .tsx যেকোন ফাইল এক্সটেনশন ব্যবহার করা যায়।
  • page.js বা page.tsx থাকা মানে সেই রাউটটি পাবলিকলি এক্সেস করা যাবে।

গুরুত্বপূর্ন বিষয়:

  1. ফোল্ডার হলো রাউট সেগমেন্ট।
    • উদাহরণ: app/blog মানে /blog রাউট।
  2. পেজ তৈরি করতে page.js ফাইল থাকতেই হবে
  3. Layouts বা কম্পোনেন্ট শেয়ার করতে পেজ ফাইল ছাড়াও অন্যান্য ফাইল রাখতে পারেন।