Static এবং Dynamic Routes গাইড ও নোট

Next.js একটি শক্তিশালী রাউটিং সিস্টেম অফার করে যা আপনাকে সহজে Static এবং Dynamic Routes তৈরি করতে সাহায্য করে। এই দুই ধরনের রাউটের মধ্যে পার্থক্য রয়েছে এবং তাদের ব্যবহারের কৌশল আলাদা।

নিচে বিস্তারিতভাবে Static এবং Dynamic Routes এর মধ্যে পার্থক্য এবং এগুলোর কিভাবে ব্যবহার করতে হয় তা আলোচনা করা হয়েছে।

Static Routes

Static Routes হল এমন রাউট যেগুলি আপনার অ্যাপ্লিকেশনের pages/ ফোল্ডারে থাকা ফাইলগুলোর সাথে সরাসরি সম্পর্কিত। এখানে প্রতিটি .js (বা .ts, .tsx) ফাইল একটি নির্দিষ্ট URL রাউটের সাথে সংযুক্ত থাকে।

Static Routes এর উদাহরণ:

pages/
├── index.js         // হোম পেজ
├── about.js         // About পেজ
└── contact.js       // Contact পেজ

উপরের উদাহরণে:

• / রাউটটি index.js পেজের জন্য।
• /about রাউটটি about.js পেজের জন্য।
• /contact রাউটটি contact.js পেজের জন্য।

Next.js স্বয়ংক্রিয়ভাবে pages/ ফোল্ডারের মধ্যে থাকা প্রতিটি ফাইলকে একটি URL রাউটের সাথে ম্যাপ করে দেয়। এতে আপনাকে ম্যানুয়ালি রাউটিং সেটআপ করতে হয় না। যেকোনো .js ফাইল যা pages/ ফোল্ডারে থাকবে, তা স্বয়ংক্রিয়ভাবে একটি রাউট হয়ে যাবে।

Dynamic Routes

Dynamic Routes হল এমন রাউট যা URL প্যারামিটার (dynamic segments) এর মাধ্যমে কাজ করে। Next.js ডাইনামিক রাউটিং সিস্টেমে আপনার URL এর অংশকে কাস্টম প্যারামিটার হিসেবে ব্যবহার করা যায়, যা রুট ফাইলের নামের মধ্যে ডাইনামিক সেগমেন্টের মাধ্যমে করা হয়।

Next.js ডাইনামিক রাউটের জন্য ফোল্ডার বা ফাইলের নামের মধ্যে [] ব্যবহার করে। উদাহরণস্বরূপ, যদি আপনি একটি পেজ চান যা id বা slug এর ভিত্তিতে রেন্ডার হবে, তবে আপনি সেই ফাইলের নামের মধ্যে [param] ব্যবহার করবেন।

Dynamic Routes এর উদাহরণ:

pages/
├── index.js          // হোম পেজ
└── posts/
    └── [id].js       // ডাইনামিক রাউট

উপরের উদাহরণে:

• /posts/1, /posts/2 ইত্যাদি URL গুলো [id].js ফাইলের মাধ্যমে রেন্ডার হবে। এখানে id হল ডাইনামিক প্যারামিটার যা URL থেকে নেয়া হবে।

ডাইনামিক রাউটের কাজ:

আপনি যদি /posts/1 এই URL এ যান, তাহলে [id].js ফাইলটি রেন্ডার হবে এবং আপনি id প্যারামিটার হিসেবে 1 পাবেন।

কোড উদাহরণ:

// pages/posts/[id].js

import { useRouter } from 'next/router';

export default function Post() {
  const router = useRouter();
  const { id } = router.query; // 'id' প্যারামিটারটি URL থেকে আসবে

  return (
    <div>
      <h1>Post ID: {id}</h1>
    </div>
  );
}

এখানে, router.query.id হবে URL এর অংশ, যেমন /posts/1 এর জন্য id এর মান হবে 1।

Static vs Dynamic Routes: পার্থক্য

Static vs Dynamic: একসাথে ব্যবহার

Next.js আপনাকে Static এবং Dynamic Routes একসাথে ব্যবহার করার সুযোগ দেয়। উদাহরণস্বরূপ, আপনি Static পেজের পাশাপাশি Dynamic রাউটও ব্যবহার করতে পারেন।

উদাহরণ:

pages/
├── index.js         // Static Route
├── about.js         // Static Route
└── posts/
    ├── index.js     // Static Route
    └── [id].js      // Dynamic Route

এখানে, /posts রুটটি Static রাউট হয়ে যাবে, এবং /posts/[id] রুটটি Dynamic রাউট হিসেবে কাজ করবে।

সারাংশ

• Static Routes হলো নির্দিষ্ট URL রাউটের জন্য তৈরি পেজ, যা pages/ ফোল্ডারে .js ফাইলের মাধ্যমে তৈরি করা হয়।
• Dynamic Routes হলো URL প্যারামিটার ভিত্তিক রাউট, যেখানে আপনি [param] ব্যবহার করে ডাইনামিক রাউট তৈরি করতে পারেন।
• Next.js এ Static এবং Dynamic Routes একসাথে ব্যবহার করা সম্ভব, যা আপনাকে অত্যন্ত নমনীয় রাউটিং সিস্টেম প্রদান করে।

এভাবে, Next.js এ Static এবং Dynamic Routes ব্যবহার করে আপনি খুব সহজে স্কেলেবল ও মেইনটেনেবল ওয়েব অ্যাপ্লিকেশন তৈরি করতে পারেন।

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 এর কাজের ধরন:

1. পেজ ফাইলের নাম অনুযায়ী রাউট তৈরি হয়:
   • pages/index.js → /
   • pages/about.js → /about
   • pages/contact.js → /contact

2. নেস্টেড রাউট (Nested Routes): আপনি যদি একটি সাব-ফোল্ডার তৈরি করেন, তাহলে তার ভিতরে থাকা পেজও স্বয়ংক্রিয়ভাবে একটি সাব-রাউট হিসেবে কাজ করবে।

   উদাহরণ:

   pages/
   ├── index.js         // /
   ├── about.js         // /about
   └── blog/
       ├── index.js     // /blog
       ├── [id].js      // /blog/:id (ডাইনামিক রাউট)
   

   এখানে:

   • pages/blog/index.js → /blog
   • pages/blog/[id].js → /blog/:id (ডাইনামিক রাউট)

3. Dynamic Routes: যদিও এটি স্ট্যাটিক রাউটিং, Next.js ডাইনামিক রাউটিংও সমর্থন করে, যেখানে পেজের নামের মধ্যে [param] ব্যবহার করা হয়।

   উদাহরণ:

   pages/
   └── posts/
       └── [id].js      // /posts/:id
   

   এখানে [id].js একটি ডাইনামিক রাউট হবে যা প্যারামিটার গ্রহণ করবে। উদাহরণস্বরূপ, /posts/1 বা /posts/2 এর মতো রাউট কাজ করবে।

4. Error Pages: Next.js pages/404.js বা pages/_error.js ফাইলগুলোকে কাস্টম 404 পেজ বা এরর হ্যান্ডলার হিসেবে ব্যবহার করে।

Static Routes এর সুবিধা

1. SEO ফ্রেন্ডলি: স্ট্যাটিক রাউটিং Next.js এর প্রি-রেন্ডারিং ফিচারের সাথে কাজ করে, যার ফলে সার্চ ইঞ্জিনে ভালো ফলাফল পাওয়া যায়। প্রতিটি পেজ স্বয়ংক্রিয়ভাবে HTML রেন্ডার হয়, যা SEO এর জন্য উপকারী।
2. দ্রুত লোডিং: স্ট্যাটিক রাউটিংয়ের মাধ্যমে প্রতিটি পেজের জন্য একটি প্রি-রেন্ডার HTML পেজ তৈরি হয়। এটি ক্লায়েন্ট সাইডে রেন্ডারিংয়ের তুলনায় অনেক দ্রুত লোড হয়।
3. সহজ রাউটিং: Next.js এর স্ট্যাটিক রাউটিং খুবই সহজ। আপনাকে কেবল ফোল্ডার এবং ফাইল তৈরি করতে হবে, এবং Next.js স্বয়ংক্রিয়ভাবে রাউটিং ম্যানেজ করে।

সারাংশ

Next.js এ static routes হলো স্বয়ংক্রিয়ভাবে তৈরি হওয়া রাউট, যেগুলো pages/ ফোল্ডারে থাকা ফাইলের নামের উপর নির্ভর করে। প্রতিটি .js, .ts, বা .tsx ফাইল একটি URL এর সাথে সম্পর্কিত হয়ে রাউট হিসেবে কাজ করে। স্ট্যাটিক রাউটিং ব্যবহারে কোড লেখার প্রয়োজন পড়ে না এবং এটি SEO ফ্রেন্ডলি ও দ্রুত লোডিং নিশ্চিত করে।

Next.js ডাইনামিক রাউটিং (Dynamic Routing) সমর্থন করে, যা আপনাকে URL প্যারামিটার ব্যবহার করে রাউট তৈরি করতে সক্ষম করে। ডাইনামিক রাউটিং আপনার অ্যাপ্লিকেশনকে আরও ফ্লেক্সিবল এবং স্কেলেবল করে তোলে, যেখানে URL এর বিভিন্ন অংশ ডাইনামিকভাবে পরিবর্তিত হতে পারে।

ডাইনামিক রাউট কী?

ডাইনামিক রাউটিং মানে হল, URL এর প্যারামিটার বা ভেরিয়েবল অংশের মাধ্যমে পেজের কন্টেন্ট পরিবর্তন করা। যেমন, আপনি যদি একটি ব্লগ তৈরি করেন, যেখানে প্রতিটি পোস্টের আলাদা URL থাকে, তবে সেই URL-কে ডাইনামিকভাবে ব্যবহার করা যায়। উদাহরণস্বরূপ, http://localhost:3000/posts/1, http://localhost:3000/posts/2।

১. ডাইনামিক রাউট তৈরি করা

Next.js-এ ডাইনামিক রাউট তৈরি করতে pages/ ফোল্ডারের মধ্যে ব্র্যাকেট ([]) ব্যবহার করতে হয়। এই ব্র্যাকেটের মধ্যে থাকা নামটি URL প্যারামিটার হিসেবে কাজ করবে।

উদাহরণ:

ধরা যাক, আপনি একটি পোস্টের পেজ তৈরি করতে চান, যেখানে প্রতিটি পোস্টের জন্য আলাদা URL থাকবে।

• pages/posts/[id].js: এটি ডাইনামিক রাউট ফাইল। এখানে id হল একটি ডাইনামিক প্যারামিটার, যা URL থেকে গ্রহণ করা হবে।

// pages/posts/[id].js

import { useRouter } from 'next/router'

const Post = () => {
  const router = useRouter()
  const { id } = router.query  // `id` প্যারামিটার URL থেকে নেওয়া হবে

  return (
    <div>
      <h1>Post {id}</h1>
      <p>এটি পোস্ট {id}-এর বিস্তারিত পেজ।</p>
    </div>
  )
}

export default Post

এখানে [id].js ফাইলটি http://localhost:3000/posts/1, http://localhost:3000/posts/2 ইত্যাদি রাউটগুলোর জন্য ব্যবহৃত হবে। useRouter হুকের মাধ্যমে আমরা URL থেকে id প্যারামিটারটি পেয়েছি এবং তা রেন্ডার করেছি।

২. ডাইনামিক রাউটিং ব্যবহার করা

যখন আপনি এই ডাইনামিক রাউট তৈরি করবেন, তখন আপনি সহজেই URL প্যারামিটার ব্যবহার করে ডেটা লোড করতে বা UI কাস্টমাইজ করতে পারবেন। উদাহরণস্বরূপ, আপনি ব্লগ পোস্টের ডেটা API থেকে লোড করতে পারেন।

API থেকে ডেটা ফেচ করা উদাহরণ:

// pages/posts/[id].js

import { useRouter } from 'next/router'

const Post = ({ post }) => {
  const router = useRouter()
  
  // যদি পেজ লোড হচ্ছে, তবে 'Loading...' দেখান
  if (router.isFallback) {
    return <div>Loading...</div>
  }

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  )
}

// এই ফাংশনটি স্লাগ বা id প্যারামিটার ব্যবহার করে ডেটা ফেচ করবে
export async function getStaticPaths() {
  // API বা ডাটাবেস থেকে সমস্ত পোস্টের id সংগ্রহ করা
  const res = await fetch('https://jsonplaceholder.typicode.com/posts')
  const posts = await res.json()

  const paths = posts.map(post => ({
    params: { id: post.id.toString() }
  }))

  return {
    paths,
    fallback: true,  // fallback mode on
  }
}

// এই ফাংশনটি প্রত্যেকটি পেজের জন্য ডেটা রিটার্ন করবে
export async function getStaticProps({ params }) {
  const res = await fetch(`https://jsonplaceholder.typicode.com/posts/${params.id}`)
  const post = await res.json()

  return {
    props: {
      post
    },
  }
}

export default Post

এখানে আমরা দুটি ফাংশন ব্যবহার করেছি:

1. getStaticPaths(): এটি সমস্ত প্যারামিটার সহ রাউট পাথের একটি তালিকা তৈরি করে।
2. getStaticProps(): এটি পেজের জন্য ডেটা ফেচ করে, যেখানে প্যারামিটার থেকে id ব্যবহার করা হয়েছে।

৩. নেস্টেড ডাইনামিক রাউটস

আপনি চাইলে নেস্টেড ডাইনামিক রাউটও তৈরি করতে পারেন। উদাহরণস্বরূপ, যদি আপনার ব্লগ পোস্টে কমেন্ট থাকে, তবে আপনি একটি নেস্টেড ডাইনামিক রাউট তৈরি করতে পারেন।

উদাহরণ:

• pages/posts/[id]/comments/[commentId].js: এটি পোস্টের কমেন্টের জন্য ডাইনামিক রাউট।

// pages/posts/[id]/comments/[commentId].js

import { useRouter } from 'next/router'

const Comment = () => {
  const router = useRouter()
  const { id, commentId } = router.query  // `id` এবং `commentId` প্যারামিটার গ্রহণ

  return (
    <div>
      <h1>Post {id} - Comment {commentId}</h1>
      <p>এটি পোস্ট {id}-এর কমেন্ট {commentId}-এর বিস্তারিত পেজ।</p>
    </div>
  )
}

export default Comment

এখানে, id হল পোস্টের আইডি এবং commentId হল কমেন্টের আইডি।

৪. Fallback মোড

Next.js ডাইনামিক রাউটিংয়ে fallback অপশনটি ব্যবহার করে আপনি পেজ লোডিংয়ের সময় ভিন্ন আচরণ সেট করতে পারেন।

• false: পেজ শুধুমাত্র প্রিপ্রোডাকশন পাথগুলির জন্য তৈরি হবে।
• true: যখন নতুন পাথ ভিজিট হবে, তখন Next.js সেই পাথের জন্য পেজ তৈরি করবে এবং তখন এটি "loading" স্টেট দেখাবে।
• blocking: পেজটি সার্ভার সাইডে সম্পূর্ণ লোড হবে এবং তারপরই ব্যবহারকারীকে রেন্ডার করা হবে।

সারাংশ

Next.js-এ ডাইনামিক রাউটিং ব্যবহার করে আপনি আপনার অ্যাপ্লিকেশনে ফ্লেক্সিবিলিটি এবং স্কেলেবিলিটি যুক্ত করতে পারেন। আপনি [param] সিনট্যাক্স ব্যবহার করে URL প্যারামিটার গ্রহণ করতে পারেন এবং সেই অনুযায়ী ডেটা বা কনটেন্ট রেন্ডার করতে পারেন। এর মাধ্যমে আপনি অত্যন্ত ডাইনামিক এবং কাস্টমাইজযোগ্য ওয়েব অ্যাপ্লিকেশন তৈরি করতে সক্ষম হবেন।

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: এই রাউটটি একইভাবে কাজ করে, তবে এটি প্যারামিটার দেয়া বা না দেয়ার ক্ষেত্রে নমনীয়তা প্রদান করে।

এই রাউটিং পদ্ধতিগুলি ব্যবহার করে আপনি ডাইনামিক রাউটিং এবং ইউজার কাস্টমাইজড রাউটিং খুব সহজে পরিচালনা করতে পারেন Next.js এর মাধ্যমে।

Next.js এর রাউটিং সিস্টেম খুবই সহজ এবং শক্তিশালী। এটি File-based Routing ব্যবহার করে, যা ডেভেলপারদের রাউটিং সেটআপ করতে আরও সহজ এবং পরিষ্কার উপায় প্রদান করে। এছাড়া, Next.js ডাইনামিক রাউটিং এবং Nested Routes (নেস্টেড রাউট) সমর্থন করে, যা আপনার অ্যাপ্লিকেশনের মধ্যে জটিল রাউটিং কাঠামো তৈরি করতে সহায়তা করে।

১. File-based Routing

Next.js এর সবচেয়ে গুরুত্বপূর্ণ বৈশিষ্ট্য হলো File-based Routing, যেখানে প্রতিটি pages/ ফোল্ডারের ফাইল একটি নির্দিষ্ট রাউটের সাথে সম্পর্কিত থাকে। এই সিস্টেমে রাউটিং নির্ধারণ করা হয় ফাইলের নাম ও অবস্থানের মাধ্যমে, যার ফলে আপনাকে কনফিগারেশন ফাইলের প্রয়োজন হয় না।

কীভাবে কাজ করে:

• pages/ ফোল্ডারের ফাইল: প্রতিটি .js (বা .tsx) ফাইল একটি রাউটের সাথে সম্পর্কিত।
• index.js: এটি / রাউটের জন্য।
• about.js: এটি /about রাউটের জন্য।
• [param].js: এটি ডাইনামিক রাউটিং-এর জন্য, যেখানে param ভেরিয়েবল হতে পারে যেকোনো URL প্যারামিটার।

উদাহরণ:

pages/
├── index.js        // হোম পেজ ("/")
├── about.js        // About পেজ ("/about")
└── posts/
    ├── index.js    // Posts পেজ ("/posts")
    └── [id].js     // Dynamic route for individual post ("/posts/:id")

এখানে index.js হলো হোম পেজ, about.js হলো /about পেজ, এবং posts/[id].js হলো ডাইনামিক রাউট যা /posts/1, /posts/2 ইত্যাদি URL-এর জন্য ব্যবহৃত হবে।

২. Nested Routes

Next.js তে Nested Routes তৈরি করা খুবই সহজ। আপনি যদি আপনার অ্যাপ্লিকেশনে সাব-পেজ বা সাব-রাউট তৈরি করতে চান, তাহলে শুধু pages/ ফোল্ডারের মধ্যে একটি নতুন ফোল্ডার তৈরি করতে হবে এবং তার মধ্যে পেজ ফাইল রাখতে হবে।

উদাহরণ:

ধরা যাক, আপনি একটি ব্লগ পেজ তৈরি করতে চান যেখানে প্রতিটি পোস্টের আলাদা পেজ থাকবে। আপনার ডিরেক্টরি স্ট্রাকচার এমন হবে:

pages/
├── index.js        // হোম পেজ ("/")
├── blog/
│   ├── index.js    // ব্লগ পেজ ("/blog")
│   └── [id].js     // ব্লগ পোস্টের পেজ ("/blog/:id")
└── about.js        // About পেজ ("/about")

এখানে blog/ ফোল্ডারটি একটি নেস্টেড রাউট তৈরি করছে:

• pages/blog/index.js — এটি /blog রাউটের জন্য।
• pages/blog/[id].js — এটি /blog/:id ডাইনামিক রাউটের জন্য, যেখানে :id যেকোনো পোস্ট আইডি হতে পারে (যেমন /blog/1, /blog/2 ইত্যাদি)।

এভাবে, আপনি সহজেই নেস্টেড রাউট তৈরি করতে পারেন এবং কমপ্লেক্স অ্যাপ্লিকেশনগুলো ম্যানেজ করতে পারবেন।

৩. Dynamic Routes (ডাইনামিক রাউটস)

Next.js ডাইনামিক রাউটিংও সমর্থন করে, যেখানে আপনি একটি ফাইলের নামের মধ্যে প্যারামিটার ব্যবহার করতে পারেন। এই ফিচারটি বিশেষভাবে ব্যবহার হয়, যখন আপনি জানেন না যে কোন রাউটগুলো আপনাকে এক্সেস করতে হবে (যেমন ডেটাবেস থেকে রাউটগুলো প্রাপ্তির মাধ্যমে)।

উদাহরণ:

pages/posts/[id].js ফাইলটি একটি ডাইনামিক রাউট তৈরি করে, যেখানে id URL প্যারামিটার হবে। এর মাধ্যমে আপনি posts/1, posts/2 ইত্যাদি রাউট ব্যবহার করতে পারবেন।

// pages/posts/[id].js

import { useRouter } from 'next/router';

const Post = () => {
  const router = useRouter();
  const { id } = router.query;

  return <div>Post ID: {id}</div>;
}

export default Post;

এতে, আপনি http://localhost:3000/posts/1 বা http://localhost:3000/posts/2 রাউটে যেকোনো পোস্টের আইডি দেখতে পারবেন।

৪. Catch-all Routes (ক্যাচ-অল রাউটস)

Next.js তে Catch-all Routes তৈরি করা সম্ভব, যার মাধ্যমে আপনি একটি রাউটকে একাধিক প্যারামিটার বা নেস্টেড রাউটের জন্য ধরতে পারেন।

উদাহরণ:

pages/posts/[...slug].js ফাইলটি সব ধরনের সাব-পেজের জন্য একটি ক্যাচ-অল রাউট তৈরি করবে।

pages/posts/[...slug].js

এটি http://localhost:3000/posts/1, http://localhost:3000/posts/2024/tech ইত্যাদি সব ধরনের URL রাউটের জন্য কাজ করবে, এবং URL এর প্যারামিটারগুলো slug হিসাবে অ্যাক্সেস করা যাবে।

// pages/posts/[...slug].js

import { useRouter } from 'next/router';

const Post = () => {
  const router = useRouter();
  const { slug } = router.query;

  return <div>Post Slug: {slug}</div>;
}

export default Post;

এতে, slug এ URL প্যারামিটার হিসেবে সব ভ্যালু পাওয়া যাবে।

সারাংশ

Next.js এর রাউটিং সিস্টেম বেশ শক্তিশালী এবং সহজে ব্যবহারযোগ্য। File-based routing এর মাধ্যমে আপনি সরাসরি ফাইলের নাম অনুযায়ী রাউট তৈরি করতে পারেন, এবং Nested Routes ও Dynamic Routes এর মাধ্যমে জটিল রাউটিং কাঠামো তৈরি করতে পারেন। এছাড়া, Catch-all Routes এর মাধ্যমে আপনার অ্যাপ্লিকেশনে আরো উন্নত রাউটিং ফিচার যুক্ত করতে পারেন।