Next.js একটি React ভিত্তিক ফ্রেমওয়ার্ক যা ডিফল্টভাবে স্ট্যাটিক রাউটিং সিস্টেম প্রদান করে। Static routes (স্ট্যাটিক রাউটস) হলো এমন রাউট যেগুলো প্রজেক্টের ডিরেক্টরি স্ট্রাকচারে থাকা ফাইলের নামের মাধ্যমে এক্সেস করা যায়। এই রাউটগুলি সেগুলোর সাথে সম্পর্কিত পেজের উপর ভিত্তি করে তৈরি হয় এবং এই রাউটগুলো অটোমেটিক্যালি নির্ধারিত হয়।
Next.js তে স্ট্যাটিক রাউটের সুবিধা হলো এটি দ্রুত লোডিং এবং SEO ফ্রেন্ডলি, কারণ এটি HTML পেজগুলি প্রি-রেন্ডার করে। আসুন দেখে নিই Static Routes কী এবং এটি কিভাবে কাজ করে।
Static Routes কী?
Static Routes হলো সেই রাউটগুলো যেগুলো প্রজেক্টের pages/ ফোল্ডারে থাকা ফাইলের নাম অনুযায়ী স্বয়ংক্রিয়ভাবে তৈরি হয়। প্রতিটি .js, .ts বা .tsx ফাইল একটি নির্দিষ্ট URL এর সাথে যুক্ত থাকে। Next.js এই URL গুলি স্ট্যাটিক রাউট হিসেবে স্বয়ংক্রিয়ভাবে রেন্ডার করে এবং রাউটের জন্য ফাইল কনটেন্ট দেখায়।
এটি মূলত পেজ-ভিত্তিক রাউটিং পদ্ধতি, যেখানে আপনার পেজের নামই রাউটের অংশ হয়ে দাঁড়ায়।
উদাহরণ:
ধরা যাক, আপনার pages/ ফোল্ডারে নিম্নলিখিত ফাইলগুলো আছে:
pages/
├── index.js // হোম পেজ (/)
├── about.js // About পেজ (/about)
└── contact.js // Contact পেজ (/contact)
এখানে, স্বয়ংক্রিয়ভাবে রাউটিং হবে:
/→pages/index.js/about→pages/about.js/contact→pages/contact.js
এগুলো হলো স্ট্যাটিক রাউট, যেগুলো ফাইলের নামের উপর ভিত্তি করে তৈরি হয় এবং Next.js এর রাউটিং সিস্টেম স্বয়ংক্রিয়ভাবে এগুলোর URL তৈরি করে।
Static Routes কিভাবে কাজ করে?
Next.js স্বয়ংক্রিয়ভাবে pages/ ফোল্ডারে থাকা প্রতিটি ফাইলকে একটি রাউট হিসেবে চিনতে পারে। এর মাধ্যমে আপনি কোন কনফিগারেশন বা রাউটিং কোড লিখতে হয় না। কেবল ফাইলের নাম এবং তার অবস্থান অনুযায়ী রাউট তৈরি হয়ে যায়।
Static Routes এর কাজের ধরন:
- পেজ ফাইলের নাম অনুযায়ী রাউট তৈরি হয়:
pages/index.js→/pages/about.js→/aboutpages/contact.js→/contact
নেস্টেড রাউট (Nested Routes): আপনি যদি একটি সাব-ফোল্ডার তৈরি করেন, তাহলে তার ভিতরে থাকা পেজও স্বয়ংক্রিয়ভাবে একটি সাব-রাউট হিসেবে কাজ করবে।
উদাহরণ:
pages/ ├── index.js // / ├── about.js // /about └── blog/ ├── index.js // /blog ├── [id].js // /blog/:id (ডাইনামিক রাউট)এখানে:
pages/blog/index.js→/blogpages/blog/[id].js→/blog/:id(ডাইনামিক রাউট)
Dynamic Routes: যদিও এটি স্ট্যাটিক রাউটিং, Next.js ডাইনামিক রাউটিংও সমর্থন করে, যেখানে পেজের নামের মধ্যে
[param]ব্যবহার করা হয়।উদাহরণ:
pages/ └── posts/ └── [id].js // /posts/:idএখানে
[id].jsএকটি ডাইনামিক রাউট হবে যা প্যারামিটার গ্রহণ করবে। উদাহরণস্বরূপ,/posts/1বা/posts/2এর মতো রাউট কাজ করবে।- Error Pages: Next.js
pages/404.jsবাpages/_error.jsফাইলগুলোকে কাস্টম 404 পেজ বা এরর হ্যান্ডলার হিসেবে ব্যবহার করে।
Static Routes এর সুবিধা
- SEO ফ্রেন্ডলি: স্ট্যাটিক রাউটিং Next.js এর প্রি-রেন্ডারিং ফিচারের সাথে কাজ করে, যার ফলে সার্চ ইঞ্জিনে ভালো ফলাফল পাওয়া যায়। প্রতিটি পেজ স্বয়ংক্রিয়ভাবে HTML রেন্ডার হয়, যা SEO এর জন্য উপকারী।
- দ্রুত লোডিং: স্ট্যাটিক রাউটিংয়ের মাধ্যমে প্রতিটি পেজের জন্য একটি প্রি-রেন্ডার HTML পেজ তৈরি হয়। এটি ক্লায়েন্ট সাইডে রেন্ডারিংয়ের তুলনায় অনেক দ্রুত লোড হয়।
- সহজ রাউটিং: Next.js এর স্ট্যাটিক রাউটিং খুবই সহজ। আপনাকে কেবল ফোল্ডার এবং ফাইল তৈরি করতে হবে, এবং Next.js স্বয়ংক্রিয়ভাবে রাউটিং ম্যানেজ করে।
সারাংশ
Next.js এ static routes হলো স্বয়ংক্রিয়ভাবে তৈরি হওয়া রাউট, যেগুলো pages/ ফোল্ডারে থাকা ফাইলের নামের উপর নির্ভর করে। প্রতিটি .js, .ts, বা .tsx ফাইল একটি URL এর সাথে সম্পর্কিত হয়ে রাউট হিসেবে কাজ করে। স্ট্যাটিক রাউটিং ব্যবহারে কোড লেখার প্রয়োজন পড়ে না এবং এটি SEO ফ্রেন্ডলি ও দ্রুত লোডিং নিশ্চিত করে।
Read more
