Link এবং Dynamic Routing গাইড ও নোট

Next.js রাউটিং ব্যবস্থাটি খুবই শক্তিশালী এবং সহজ। এটি ডাইনামিক রাউটিং (Dynamic Routing) সমর্থন করে, যার মাধ্যমে আপনি অ্যাপের বিভিন্ন পেজ এবং ডেটা প্যারামিটার নির্ধারণ করতে পারেন। এছাড়াও, Next.js আপনাকে সহজে <Link> কম্পোনেন্ট ব্যবহার করার মাধ্যমে পেজের মধ্যে নেভিগেট করতে দেয়।

১. Next.js এর Link কম্পোনেন্ট

Next.js তে <Link> কম্পোনেন্টটি ব্যবহার করা হয় পেজের মধ্যে নেভিগেট করার জন্য। এটি সাধারণ React এর <a> ট্যাগের মতোই কাজ করে, তবে এটি স্পিড এবং পারফরম্যান্স বৃদ্ধির জন্য প্রয়োজনীয় অটোপ্রি-লোডিং (auto-preloading) সক্ষম করে।

উদাহরণ:

import Link from 'next/link'

export default function Home() {
  return (
    <div>
      <h1>Welcome to Next.js!</h1>
      <Link href="/about">
        <a>Go to About Page</a>
      </Link>
    </div>
  )
}

এখানে, <Link> কম্পোনেন্ট ব্যবহার করা হয়েছে /about রাউটের সাথে নেভিগেট করার জন্য। href প্রপের মাধ্যমে আপনি যেখানে যেতে চান তা নির্ধারণ করেন এবং <a> ট্যাগটি ব্যবহার করে আপনি ক্লিকযোগ্য লিঙ্ক তৈরি করেন।

Key Points:

• <Link> কম্পোনেন্টের মাধ্যমে পেজ ট্রানজিশন দ্রুত হয়, কারণ এটি রেন্ডারিং আগে পেজগুলোকে প্রি-লোড করে।
• <a> ট্যাগটি Next.js 13 এর পর অপরিহার্য নয়, তবে এটি ব্যবহারের জন্য সুপারিশ করা হয় (এটি অ্যাক্সেসিবিলিটি এবং SEO এর জন্য উপকারী)।

২. Dynamic Routing (ডাইনামিক রাউটিং)

Next.js ডাইনামিক রাউটিং সাপোর্ট করে, যা আপনাকে পেজের URL প্যারামিটার দ্বারা ডেটা পরিবর্তন করতে দেয়। উদাহরণস্বরূপ, আপনি একটি ব্লগ পেজ তৈরি করতে পারেন যেখানে পোস্টের আইডি অনুযায়ী বিভিন্ন পোস্ট প্রদর্শিত হবে।

ডাইনামিক রাউটিং সেটআপ:

Next.js ডাইনামিক রাউটিং করতে [param].js বা [param].tsx ফাইল নামের মাধ্যমে রাউট প্যারামিটার তৈরি করতে হয়।

উদাহরণ:

ধরা যাক, আপনার অ্যাপে একটি পোস্টের পেজ তৈরি করতে চান, যেখানে প্রতিটি পোস্টের আইডি একটি ভিন্ন URL প্যারামিটার হবে। এর জন্য, আপনি [id].js ফাইল তৈরি করবেন।

1. pages/posts/[id].js:

import { useRouter } from 'next/router'

export default function Post() {
  const router = useRouter()
  const { id } = router.query  // ডাইনামিক প্যারামিটার (id) গ্রহণ করা

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

এখানে, useRouter হুকটি ব্যবহার করা হয়েছে পেজের URL থেকে ডাইনামিক প্যারামিটার (যেমন id) নিতে। এর মাধ্যমে, যখন আপনি /posts/1, /posts/2 বা অন্য কোন পেজে যাবেন, পেজের কন্টেন্ট ডাইনামিকভাবে পরিবর্তিত হবে।

৩. Link এবং Dynamic Routing একত্রে ব্যবহার

এখন, যদি আপনি একটি লিস্ট থেকে প্রতিটি পোস্টে যেতে চান, তবে <Link> কম্পোনেন্ট এবং ডাইনামিক রাউটিং একত্রে ব্যবহার করতে পারেন।

উদাহরণ:

1. pages/posts/index.js - পোস্টের লিস্ট

import Link from 'next/link'

export default function Posts() {
  const posts = [
    { id: 1, title: 'First Post' },
    { id: 2, title: 'Second Post' },
    { id: 3, title: 'Third Post' },
  ]

  return (
    <div>
      <h1>Posts List</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            <Link href={`/posts/${post.id}`}>
              <a>{post.title}</a>
            </Link>
          </li>
        ))}
      </ul>
    </div>
  )
}

এখানে, প্রতিটি পোস্টের জন্য একটি লিঙ্ক তৈরি করা হয়েছে, যা ডাইনামিক রাউট /posts/[id] রাউটের সাথে যুক্ত। যখন একজন ব্যবহারকারী একটি পোস্টে ক্লিক করবে, সে পোস্টের বিস্তারিত দেখাবে।

৪. Catch-all Routes

Next.js আরও একটি শক্তিশালী ফিচার সরবরাহ করে, যা হল catch-all routes। এটি একটি ডাইনামিক রাউট যা একাধিক প্যারামিটার গ্রহণ করতে পারে। catch-all রাউট তৈরি করতে [...param].js ফাইল নাম ব্যবহার করা হয়।

উদাহরণ:

1. pages/posts/[...slug].js - একাধিক স্লাগ দ্বারা রাউটিং

import { useRouter } from 'next/router'

export default function Post() {
  const router = useRouter()
  const { slug } = router.query  // সমস্ত প্যারামিটার গ্রহণ করা

  return (
    <div>
      <h1>Post Slug: {slug.join('/')}</h1>  {/* প্যারামিটারগুলোর তালিকা */}
    </div>
  )
}

এখানে slug হলো একটি অ্যারে যা সমস্ত প্যারামিটার ধারণ করে। উদাহরণস্বরূপ, /posts/first/second এই URL এর ক্ষেত্রে slug হবে ['first', 'second']।

৫. Fallback Rendering (Dynamic Routes এর জন্য)

Next.js getStaticPaths এবং getStaticProps এর মাধ্যমে fallback rendering সাপোর্ট করে, যার মাধ্যমে ডাইনামিক রাউটিংয়ের জন্য পেজ রেন্ডার করা হয়।

উদাহরণ:

1. pages/posts/[id].js:

export async function getStaticPaths() {
  return {
    paths: [{ params: { id: '1' } }, { params: { id: '2' } }],
    fallback: true, // যখন পেজের জন্য ডেটা তৈরি করা না থাকে, তখন fallback true হওয়া উচিত।
  }
}

export async function getStaticProps({ params }) {
  const { id } = params
  return {
    props: {
      post: { id, title: `Post ${id}` },
    },
  }
}

এখানে, getStaticPaths ডাইনামিক পেজের জন্য কোন পাথ (URL) তৈরি হবে তা নির্ধারণ করে এবং getStaticProps সেই পাথের জন্য প্রয়োজনীয় ডেটা প্রদান করে।

সারাংশ

Next.js এ Link কম্পোনেন্ট এবং Dynamic Routing একসাথে ব্যবহারের মাধ্যমে আপনার অ্যাপ্লিকেশনকে আরো ডাইনামিক এবং ইউজার ফ্রেন্ডলি করা যায়। আপনি সহজেই ডাইনামিক URL প্যারামিটার দিয়ে আপনার পেজগুলো তৈরি করতে পারবেন, এবং catch-all routes এবং fallback rendering এর মতো ফিচারের মাধ্যমে অ্যাপ্লিকেশনটি আরো শক্তিশালী করতে পারবেন।