Web Development Dynamic Routes তৈরি করা গাইড ও নোট

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 প্যারামিটার গ্রহণ করতে পারেন এবং সেই অনুযায়ী ডেটা বা কনটেন্ট রেন্ডার করতে পারেন। এর মাধ্যমে আপনি অত্যন্ত ডাইনামিক এবং কাস্টমাইজযোগ্য ওয়েব অ্যাপ্লিকেশন তৈরি করতে সক্ষম হবেন।