Next.js এর Routing এবং Navigation গাইড ও নোট

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

নিচে Next.js এর রাউটিং এবং ন্যাভিগেশন সম্পর্কিত বিস্তারিত আলোচনা করা হয়েছে।

১. Next.js রাউটিং পদ্ধতি

Next.js এর রাউটিং সিস্টেম ফাইল সিস্টেমের উপর ভিত্তি করে কাজ করে, যেখানে আপনি pages/ ডিরেক্টরিতে প্রতিটি ফাইলকে একটি রাউট হিসেবে গণ্য করেন। প্রতিটি ফাইল বা ফোল্ডার যা pages/ ফোল্ডারে থাকে, সেটি একটি URL রাউট হয়ে ওঠে।

রাউটিং উদাহরণ:

• pages/index.js → / (হোম পেজ)
• pages/about.js → /about
• pages/contact.js → /contact

এই ফোল্ডারে ফাইল তৈরি করার মাধ্যমে স্বয়ংক্রিয়ভাবে রাউট তৈরি হয়ে যায় এবং আলাদা করে কোনো রাউট কনফিগারেশন করতে হয় না।

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

Next.js ডাইনামিক রাউটিং সাপোর্ট করে, যা আপনাকে URL প্যারামিটার ব্যবহার করে রাউট তৈরি করতে সহায়তা করে। ডাইনামিক রাউট তৈরি করতে [parameter] নামে ফোল্ডার বা ফাইল তৈরি করতে হয়।

উদাহরণ:

ধরা যাক, আপনি একটি ব্লগ সিস্টেম তৈরি করতে চান, যেখানে প্রতিটি পোস্ট একটি আলাদা URL নিয়ে আসে। এজন্য আপনি pages/posts/[id].js ফাইল তৈরি করতে পারেন।

pages/posts/[id].js:

// pages/posts/[id].js

import { useRouter } from 'next/router';

function PostPage() {
  const router = useRouter();
  const { id } = router.query;

  return (
    <div>
      <h1>পোস্ট আইডি: {id}</h1>
      <p>এটি একটি ডাইনামিক রাউটের উদাহরণ।</p>
    </div>
  );
}

export default PostPage;

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

৩. Nested Routes (নেস্টেড রাউটিং)

Next.js ফোল্ডার স্ট্রাকচারের মাধ্যমে নেস্টেড রাউটও তৈরি করতে পারে। আপনি pages/ ফোল্ডারের মধ্যে সাব-ফোল্ডার তৈরি করে তার মধ্যে রাউটিং পরিচালনা করতে পারেন। উদাহরণস্বরূপ, যদি আপনার একটি অ্যাডমিন প্যানেল থাকে, তাহলে আপনি একটি pages/admin/ ফোল্ডার তৈরি করতে পারেন এবং এর মধ্যে বিভিন্ন সাব-পেজ রাখবেন।

উদাহরণ:

pages/admin/dashboard.js:

// pages/admin/dashboard.js

function AdminDashboard() {
  return (
    <div>
      <h1>অ্যাডমিন ড্যাশবোর্ড</h1>
      <p>এটি অ্যাডমিন ড্যাশবোর্ড পেজ।</p>
    </div>
  );
}

export default AdminDashboard;

এটি স্বয়ংক্রিয়ভাবে /admin/dashboard URL এর সাথে সম্পর্কিত হবে। আপনি আরও পেজ তৈরি করতে পারেন যেমন pages/admin/users.js, pages/admin/settings.js ইত্যাদি।

৪. Link কম্পোনেন্ট (Navigation)

Next.js এর next/link কম্পোনেন্ট ব্যবহার করে আপনি ইন্টারনাল নেভিগেশন করতে পারেন, যা পেজের মধ্যে দ্রুত নেভিগেট করার জন্য ডিফারেন্সিয়াল লোডিং প্রযুক্তি ব্যবহার করে। এই কম্পোনেন্টের মাধ্যমে পেজ রিফ্রেশ না করেই এক পেজ থেকে অন্য পেজে সরাসরি নেভিগেট করা যায়।

উদাহরণ:

import Link from 'next/link';

function Navigation() {
  return (
    <nav>
      <ul>
        <li>
          <Link href="/">হোম</Link>
        </li>
        <li>
          <Link href="/about">এ About</Link>
        </li>
        <li>
          <Link href="/contact">Contact</Link>
        </li>
      </ul>
    </nav>
  );
}

export default Navigation;

এখানে, <Link /> কম্পোনেন্ট ব্যবহার করে আপনি সহজেই অন্য পেজে নেভিগেট করতে পারবেন।

৫. Programmatic Navigation (প্রোগ্রামেটিক নেভিগেশন)

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

উদাহরণ:

import { useRouter } from 'next/router';

function FormPage() {
  const router = useRouter();

  const handleSubmit = (event) => {
    event.preventDefault();
    router.push('/thank-you');  // ফর্ম সাবমিটের পর /thank-you পেজে নেভিগেট
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" placeholder="Enter your name" />
      <button type="submit">Submit</button>
    </form>
  );
}

export default FormPage;

এখানে, router.push() ব্যবহার করে আপনি প্রোগ্রামেটিকভাবে অন্য পেজে রিডাইরেক্ট করেছেন।

৬. 404 পেজ কাস্টমাইজ করা

Next.js আপনাকে একটি কাস্টম 404 পেজ তৈরি করার সুবিধা দেয়। যখন কোনো রাউট পাওয়া না যায়, তখন এটি স্বয়ংক্রিয়ভাবে pages/404.js পেজটিকে রেন্ডার করবে।

উদাহরণ:

pages/404.js:

// pages/404.js

function Custom404() {
  return (
    <div>
      <h1>404 - পেজটি পাওয়া যায়নি</h1>
      <p>আপনি যেই পেজটি খুঁজছেন তা আমাদের কাছে নেই।</p>
    </div>
  );
}

export default Custom404;

এটি আপনার অ্যাপ্লিকেশনে 404 পেজ কাস্টমাইজ করতে সাহায্য করবে।

সারাংশ

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

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

এটি React রাউটিংয়ের একটি অত্যন্ত সহজ এবং সোজা উপায় প্রদান করে, যেখানে URL এর সাথে সম্পর্কিত ফাইল এবং ডিরেক্টরি স্ট্রাকচার স্বয়ংক্রিয়ভাবে রাউটিং তৈরি করে।

Routing কী?

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

Next.js এর রাউটিং এর কাজ করার পদ্ধতি

Next.js এর রাউটিং ফিচার ফাইল-বেসড রাউটিং (File-based Routing) নামে পরিচিত, যার মাধ্যমে আপনি pages/ ডিরেক্টরিতে ফাইল তৈরি করে একটি রাউট তৈরি করতে পারেন।

Pages Directory

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

রাউটিং এর উদাহরণ

১. হোম পেজ

Next.js একটি ডিফল্ট index.js ফাইল তৈরি করে, যা আপনার হোম পেজ হিসেবে কাজ করে। এই ফাইলটির মাধ্যমে / রুটে রিকোয়েস্ট হলে এই পেজটি রেন্ডার হবে।

pages/index.js:

import React from 'react';

function HomePage() {
  return (
    <div>
      <h1>স্বাগতম! এটি আমার প্রথম Next.js অ্যাপ</h1>
    </div>
  );
}

export default HomePage;

এখন, আপনি http://localhost:3000 এ গিয়ে হোম পেজ দেখতে পারবেন।

২. নতুন পেজ তৈরি করা

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

pages/about.js:

import React from 'react';

function AboutPage() {
  return (
    <div>
      <h1>এটি একটি About পেজ</h1>
      <p>এখানে অ্যাপের সম্পর্কে বিস্তারিত তথ্য থাকবে।</p>
    </div>
  );
}

export default AboutPage;

এখন, আপনি http://localhost:3000/about এ গিয়ে এই পেজটি দেখতে পাবেন।

৩. ডাইনামিক রাউটিং

Next.js ডাইনামিক রাউটিংও সাপোর্ট করে, যার মাধ্যমে আপনি রাউটের URL প্যারামিটারগুলো ব্যবহার করতে পারবেন। এটি করতে হলে, pages/ ফোল্ডারের মধ্যে আপনি ফাইল নামের মধ্যে [] ব্যবহার করবেন। উদাহরণস্বরূপ, যদি আপনি একটি পেজ তৈরি করতে চান যেখানে URL প্যারামিটার হিসেবে id ব্যবহার হবে, তাহলে আপনি [id].js ফাইল তৈরি করবেন।

pages/posts/[id].js:

import { useRouter } from 'next/router';

function PostPage() {
  const router = useRouter();
  const { id } = router.query;

  return (
    <div>
      <h1>পোস্টের আইডি: {id}</h1>
      <p>এটি একটি ডাইনামিক পেজ যেখানে URL থেকে আইডি পাঠানো হয়।</p>
    </div>
  );
}

export default PostPage;

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

৪. Nested Routing

Next.js এ আপনি nested routes (অর্থাৎ, সাব-পেজ) তৈরি করতে পারেন ফোল্ডার স্ট্রাকচার ব্যবহার করে। উদাহরণস্বরূপ, যদি আপনি /blog রুটের অধীনে বিভিন্ন পেজ রাখতে চান, তাহলে আপনি pages/blog/ ফোল্ডারে পেজ ফাইলগুলো রাখতে পারবেন।

pages/blog/index.js:

import React from 'react';

function BlogHome() {
  return (
    <div>
      <h1>Blog হোম পেজ</h1>
      <p>এখানে ব্লগের প্রথম পেজ দেখানো হবে।</p>
    </div>
  );
}

export default BlogHome;

এখন, http://localhost:3000/blog এ গিয়ে ব্লগের হোম পেজটি দেখতে পারবেন।

pages/blog/[id].js:

import { useRouter } from 'next/router';

function BlogPost() {
  const router = useRouter();
  const { id } = router.query;

  return (
    <div>
      <h1>ব্লগ পোস্টের আইডি: {id}</h1>
      <p>এখানে ব্লগ পোস্টের বিস্তারিত তথ্য থাকবে।</p>
    </div>
  );
}

export default BlogPost;

এখন, আপনি http://localhost:3000/blog/1, http://localhost:3000/blog/2 ইত্যাদি URL থেকে ব্লগ পোস্টের তথ্য দেখতে পারবেন।

৫. Linking Between Pages (পেজের মধ্যে লিঙ্কিং)

Next.js এর Link কম্পোনেন্ট ব্যবহার করে আপনি বিভিন্ন পেজের মধ্যে নেভিগেট করতে পারেন। এটি React Router এর মতো কাজ করে, কিন্তু আরও কার্যকরী এবং পারফর্ম্যান্স অপটিমাইজড।

import Link from 'next/link';

function HomePage() {
  return (
    <div>
      <h1>স্বাগতম!</h1>
      <Link href="/about">
        <a>About পেজে যান</a>
      </Link>
    </div>
  );
}

export default HomePage;

এখানে Link কম্পোনেন্টের মাধ্যমে আপনি /about রুটে নেভিগেট করতে পারবেন।

সারাংশ

Next.js এর রাউটিং সিস্টেম খুবই সহজ এবং স্বয়ংক্রিয়ভাবে কাজ করে। আপনি pages/ ডিরেক্টরির মধ্যে ফাইল তৈরি করে রাউট তৈরি করতে পারেন এবং ডাইনামিক, নেস্টেড, এবং লিঙ্কিং এর মাধ্যমে সাইটের মধ্যে সহজেই নেভিগেট করতে পারেন। Next.js এর ফাইল-ভিত্তিক রাউটিং সিস্টেম একটি শক্তিশালী এবং ডেভেলপমেন্টের জন্য সময় সাশ্রয়ী পদ্ধতি প্রদান করে।

Next.js এ পেজ নেভিগেশন পরিচালনা করতে Link কম্পোনেন্ট এবং Programmatic Navigation ব্যবহৃত হয়। Link কম্পোনেন্ট পেজের মধ্যে সহজভাবে নেভিগেট করতে সাহায্য করে এবং Programmatic Navigation দ্বারা কোডের মাধ্যমে রাউট পরিবর্তন করা সম্ভব হয়। এটি আপনার অ্যাপ্লিকেশনকে দ্রুত এবং ব্যবহারকারী-বান্ধব করে তোলে।

এখানে Next.js Link Component এবং Programmatic Navigation এর ব্যবহার সম্পর্কে বিস্তারিত আলোচনা করা হলো।

১. Link Component ব্যবহার করা

Next.js এর Link কম্পোনেন্ট, React Router বা অন্যান্য নেভিগেশন পদ্ধতির মতো কাজ করে, তবে এটি পেজ রেন্ডারিংকে আরও দ্রুত এবং কার্যকরীভাবে করে তোলে। এটি ক্লায়েন্ট-সাইড নেভিগেশন সমর্থন করে, যা অ্যাপ্লিকেশনের পারফরম্যান্স বাড়ায়।

Link কম্পোনেন্টের মাধ্যমে আপনি URL রাউটগুলো সংযুক্ত করতে পারেন, এবং এটি অপ্রয়োজনীয় পেজ রিফ্রেশ ছাড়া অ্যাপ্লিকেশন পেজ পরিবর্তন করে।

উদাহরণ:

import Link from 'next/link'

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

এখানে Link কম্পোনেন্টের href প্রপ এর মাধ্যমে পেজ রাউট নির্ধারণ করা হয়েছে। ব্যবহারকারী যখন Go to About Page লিঙ্কটিতে ক্লিক করবেন, তখন এটি /about রাউটে নিয়ে যাবে।

মনে রাখবেন: Next.js 13 থেকে, <a> ট্যাগ ব্যবহার করা বাধ্যতামূলক নয় যদি না আপনি অ্যাঙ্কর ট্যাগের মতো কোনো অতিরিক্ত স্টাইল বা আচরণ চান।

২. Link কম্পোনেন্টের অন্যান্য অপশন

Next.js এর Link কম্পোনেন্টে কিছু অতিরিক্ত প্রপস রয়েছে যা বিভিন্ন পরিস্থিতিতে সহায়ক হতে পারে।

passHref:

যখন আপনি <a> ট্যাগ ব্যবহার করেন, তখন passHref প্রপটি ব্যবহার করা উচিত। এটি স্বয়ংক্রিয়ভাবে <a> ট্যাগকে href প্রপ পাঠিয়ে দেয়।

<Link href="/about" passHref>
  <a>Go to About Page</a>
</Link>

replace:

replace প্রপটি ব্যবহার করলে, নতুন পেজটি ব্রাউজারের ইতিহাসের স্ট্যাকের মধ্যে যুক্ত হবে না। এর মানে হল যে "ব্যাক" বাটনে ক্লিক করলে ব্যবহারকারী পূর্ববর্তী পেজে ফিরে যেতে পারবেন না।

<Link href="/about" replace>
  <a>Go to About Page</a>
</Link>

৩. Programmatic Navigation (কোডের মাধ্যমে রাউট পরিবর্তন)

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

useRouter হুকের মাধ্যমে রাউটিং, প্যারামিটার ফেচিং, এবং অন্যান্য নেভিগেশন অ্যাকশন করা যায়।

উদাহরণ:

import { useRouter } from 'next/router'

export default function NavigateButton() {
  const router = useRouter()

  const handleNavigation = () => {
    router.push('/about')
  }

  return (
    <div>
      <button onClick={handleNavigation}>Go to About Page</button>
    </div>
  )
}

এখানে, router.push('/about') পদ্ধতিটি ব্যবহার করে প্রোগ্রাম্যাটিকভাবে /about পেজে নেভিগেট করা হচ্ছে।

৪. router.push এবং router.replace

• router.push: এটি পেজ রাউট পরিবর্তন করে এবং ব্রাউজারের ইতিহাসে নতুন পেজটি যুক্ত করে।
• router.replace: এটি পেজ রাউট পরিবর্তন করে তবে ব্রাউজারের ইতিহাসে নতুন পেজটি যুক্ত হয় না, অর্থাৎ "ব্যাক" বাটনে ক্লিক করলে আগের পেজে ফিরে আসা যাবে না।

উদাহরণ:

import { useRouter } from 'next/router'

export default function PageNavigation() {
  const router = useRouter()

  const navigateWithPush = () => {
    router.push('/contact') // ইতিহাসে নতুন রাউট যোগ হবে
  }

  const navigateWithReplace = () => {
    router.replace('/contact') // ইতিহাসে নতুন রাউট যোগ হবে না
  }

  return (
    <div>
      <button onClick={navigateWithPush}>Go to Contact Page (push)</button>
      <button onClick={navigateWithReplace}>Go to Contact Page (replace)</button>
    </div>
  )
}

৫. Query Parameters সহ রাউটিং

আপনি যদি ডাইনামিক কনটেন্টের জন্য প্যারামিটার সহ রাউট করতে চান, তবে router.push বা Link কম্পোনেন্টে প্যারামিটার দিতে পারেন।

উদাহরণ:

import { useRouter } from 'next/router'

export default function ProductPage() {
  const router = useRouter()

  const navigateToProduct = (productId) => {
    router.push(`/product/${productId}`)
  }

  return (
    <div>
      <button onClick={() => navigateToProduct(1)}>Go to Product 1</button>
      <button onClick={() => navigateToProduct(2)}>Go to Product 2</button>
    </div>
  )
}

এখানে, /product/[id] রাউটটি ব্যবহারকারীর পণ্য আইডি অনুযায়ী নেভিগেট করবে।

সারাংশ

Next.js এর Link কম্পোনেন্ট এবং Programmatic Navigation আপনার অ্যাপ্লিকেশনের নেভিগেশনকে সহজ এবং দক্ষ করে তোলে। Link কম্পোনেন্ট দিয়ে আপনি সহজে পেজের মধ্যে নেভিগেট করতে পারেন, এবং useRouter হুক ব্যবহার করে কোডের মাধ্যমে রাউট পরিবর্তন করতে পারেন। আপনি চাইলে ডাইনামিক রাউট, প্যারামিটার, এবং অতিরিক্ত অপশন যেমন replace এবং passHref ব্যবহার করে নেভিগেশন কাস্টমাইজ করতে পারেন।

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

এখানে Nested Routing এবং Dynamic Routing কিভাবে ব্যবস্থাপনা করা যায়, তা বিস্তারিতভাবে আলোচনা করা হলো।

১. Nested Routing (নেস্টেড রাউটিং)

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

উদাহরণ:

ধরা যাক, আপনি একটি ব্লগ অ্যাপ্লিকেশন তৈরি করছেন এবং সেখানে ব্লগ পোস্টের জন্য একটি নেস্টেড রাউটিং ব্যবস্থা তৈরি করতে চান। আপনি pages/blog/ ফোল্ডারে সাব-পেজ তৈরি করবেন এবং এটি নেস্টেড রাউট হিসেবে কাজ করবে।

Step 1: প্রথমে একটি blog ফোল্ডার তৈরি করুন।

pages/blog/

Step 2: তারপর ফোল্ডারের মধ্যে নতুন একটি ফাইল তৈরি করুন, যেমন index.js।

// pages/blog/index.js
export default function BlogHome() {
  return (
    <div>
      <h1>Blog Home Page</h1>
      <p>Welcome to the blog page!</p>
    </div>
  )
}

এই রাউটটি http://localhost:3000/blog এ অ্যাক্সেস করা যাবে।

Step 3: ব্লগ পোস্টের জন্য একটি নতুন পেজ তৈরি করুন, যেমন [id].js (Dynamic Route)।

// pages/blog/[id].js
import { useRouter } from 'next/router'

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

  return (
    <div>
      <h1>Blog Post {id}</h1>
      <p>This is the blog post with ID: {id}</p>
    </div>
  )
}

এখন, আপনি http://localhost:3000/blog/1, http://localhost:3000/blog/2 এই রকম ডাইনামিক URL এর মাধ্যমে ব্লগ পোস্টগুলো অ্যাক্সেস করতে পারবেন।

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

Next.js ডাইনামিক রাউটিং সিস্টেমে URL প্যারামিটার ব্যবহার করতে পারেন। এটি সাধারণত [param] সিনট্যাক্স ব্যবহার করে করা হয়। যখন আপনি URL প্যারামিটার পরিবর্তন করেন, তখন সেই প্যারামিটার ডাইনামিকভাবে আপনার পেজে রেন্ডার হবে।

উদাহরণ:

ধরা যাক, আপনি একটি ব্লগ অ্যাপ্লিকেশনে বিভিন্ন পোস্ট দেখাতে চান, যেখানে প্রতিটি পোস্টের ID ডাইনামিকভাবে URL থেকে নেয়া হবে।

Step 1: pages/posts/[id].js ফাইল তৈরি করুন।

// pages/posts/[id].js
import { useRouter } from 'next/router'

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

  return (
    <div>
      <h1>Post ID: {id}</h1>
      <p>This is a dynamic post with ID: {id}</p>
    </div>
  )
}

এখন, আপনি http://localhost:3000/posts/1, http://localhost:3000/posts/2 ইত্যাদি URL দিয়ে ডাইনামিক পেজ রেন্ডার করতে পারবেন।

৩. Nested Dynamic Routing (নেস্টেড ডাইনামিক রাউটিং)

Next.js এ আপনি নেস্টেড এবং ডাইনামিক রাউটিং একসাথে ব্যবহার করতে পারেন। এতে, আপনি একটি রাউটের মধ্যে আরেকটি ডাইনামিক রাউট রাখবেন। এর ফলে আপনি আরও জটিল এবং লজিক্যাল URL পাথ তৈরি করতে পারবেন।

উদাহরণ:

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

Step 1: প্রথমে pages/blog/[id].js ফাইল তৈরি করুন।

// pages/blog/[id].js
import { useRouter } from 'next/router'

export default function BlogPost() {
  const router = useRouter()
  const { id } = router.query

  return (
    <div>
      <h1>Blog Post {id}</h1>
      <p>Details of the blog post {id}.</p>
    </div>
  )
}

Step 2: এরপর একটি কমেন্ট পেজ তৈরি করুন, [id]/comments.js।

// pages/blog/[id]/comments.js
import { useRouter } from 'next/router'

export default function Comments() {
  const router = useRouter()
  const { id } = router.query

  return (
    <div>
      <h1>Comments for Blog Post {id}</h1>
      <p>These are the comments for blog post {id}.</p>
    </div>
  )
}

এখন আপনি http://localhost:3000/blog/1/comments, http://localhost:3000/blog/2/comments ইত্যাদি URL ব্যবহার করে কমেন্টস পেজটি অ্যাক্সেস করতে পারবেন।

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

Next.js এ Catch-All Routes ব্যবহার করে আপনি একাধিক প্যারামিটার একসাথে ক্যাপচার করতে পারেন। এটি [...param] সিনট্যাক্স ব্যবহার করে করা হয়।

উদাহরণ:

ধরা যাক, আপনি একটি pages/blog/[...slug].js ফাইল তৈরি করতে চান, যা অনেকগুলো প্যারামিটার গ্রহণ করবে (যেমন /blog/2021/first-post এবং /blog/2022/second-post)

// pages/blog/[...slug].js
import { useRouter } from 'next/router'

export default function BlogPost() {
  const router = useRouter()
  const { slug } = router.query  // 'slug' একটি অ্যারে হবে

  return (
    <div>
      <h1>Blog Post: {slug.join(' / ')}</h1>
    </div>
  )
}

এখানে, slug একটি অ্যারে হিসেবে গ্রহণ করবে এবং [...slug] ক্যাচ-অল প্যারামিটারটি সমস্ত URL পাথ গ্রহণ করবে।

সারাংশ

Next.js এ Nested Routing এবং Dynamic Routing ব্যবস্থাপনা খুবই সহজ এবং ফ্লেক্সিবল। আপনি pages/ ফোল্ডারে ফাইল এবং সাব-ফোল্ডার তৈরি করে, URL পাথগুলোর সাথে সামঞ্জস্য রেখে রাউটিং পরিচালনা করতে পারেন। এছাড়াও, ডাইনামিক এবং নেস্টেড রাউটিং ম্যানেজমেন্ট Next.js কে আরও শক্তিশালী এবং স্কেলেবল করে তোলে।

Next.js আপনাকে একটি কাস্টম 404 পেজ তৈরি করার সুবিধা দেয়, যা ব্যবহারকারীরা যদি এমন কোনো পেজে যান যা নেই (404 Error) তখন দেখানো হবে। এই পেজে আপনি নিজের ব্র্যান্ডিং, ডিজাইন এবং ইউজার ফ্রেন্ডলি মেসেজ রাখতে পারেন।

Next.js এ কাস্টম 404 পেজ তৈরি করা খুবই সহজ এবং এতে কোনো অতিরিক্ত কনফিগারেশন প্রয়োজন হয় না। শুধু একটি নতুন ফাইল তৈরি করলেই হবে।

১. Custom 404 পেজ তৈরি করা

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

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

pages/404.js:

import Link from 'next/link'

export default function Custom404() {
  return (
    <div style={{ textAlign: 'center', padding: '50px' }}>
      <h1 style={{ fontSize: '72px', color: '#ff0000' }}>404</h1>
      <h2>Oops! Page not found</h2>
      <p>The page you're looking for does not exist.</p>
      <Link href="/">
        <a style={{ color: '#0070f3', textDecoration: 'underline' }}>Go back to home</a>
      </Link>
    </div>
  )
}

এখানে pages/404.js ফাইলটি তৈরি করা হয়েছে এবং এটি একটি কাস্টম 404 পেজ হিসেবে কাজ করবে।

• Link কম্পোনেন্ট ব্যবহার করা হয়েছে হোম পেজে ফিরে যাওয়ার জন্য, কারণ Next.js এর Link কম্পোনেন্ট ক্লায়েন্ট-সাইড রাউটিংয়ের জন্য আরও দ্রুত লোড নিশ্চিত করে।
• আপনি এখানে স্টাইলিং, কনটেন্ট এবং ডিজাইন কাস্টমাইজ করতে পারেন।

২. 404 পেজ কাস্টমাইজেশন

কাস্টম 404 পেজটি আপনার অ্যাপ্লিকেশনের শৈলী এবং ব্র্যান্ডিং অনুযায়ী কাস্টমাইজ করা সম্ভব। আপনি চাইলে এখানে:

• এনিমেশন বা আইকন যোগ করতে পারেন।
• সহজ নেভিগেশন বা সার্চ ফিচার প্রদান করতে পারেন যাতে ব্যবহারকারীরা সহজেই আপনার সাইটের অন্যান্য অংশে যেতে পারে।
• ডাইনামিক মেসেজ বা অ্যালটারনেটিভ ইউআরএল প্রদর্শন করতে পারেন।

উদাহরণস্বরূপ, আপনি যদি কিছু সার্চ অপশন বা রিসেন্ট পেজের লিংক দিতে চান:

import Link from 'next/link'

export default function Custom404() {
  return (
    <div style={{ textAlign: 'center', padding: '50px' }}>
      <h1 style={{ fontSize: '72px', color: '#ff0000' }}>404</h1>
      <h2>Oops! Page not found</h2>
      <p>The page you're looking for does not exist.</p>
      
      <div>
        <p>Try searching for something else or go to one of these pages:</p>
        <Link href="/">
          <a style={{ color: '#0070f3', textDecoration: 'underline' }}>Home</a>
        </Link>
        <br />
        <Link href="/about">
          <a style={{ color: '#0070f3', textDecoration: 'underline' }}>About Us</a>
        </Link>
      </div>
    </div>
  )
}

এখানে, আপনি Home এবং About Us লিংক দিয়ে ব্যবহারকারীদের সাইটের মূল অংশে নিয়ে আসছেন।

৩. 404 পেজের স্টাইলিং

Next.js আপনাকে কোনো ফাইল ফরম্যাট বা স্টাইলিং ইঞ্জিনের ওপর নির্ভর না করে কাস্টম 404 পেজের স্টাইল করতে সাহায্য করে। আপনি ইমপোর্ট করতে পারেন:

• CSS ফাইল: import '../styles/404.css' অথবা CSS Modules ব্যবহার করতে পারেন।
• Styled-components বা Emotion এর মতো CSS-in-JS লাইব্রেরি ব্যবহার করতে পারেন।
• Tailwind CSS ইত্যাদি।

৪. কাস্টম 404 পেজের SEO

আপনি কাস্টম 404 পেজের SEO নিশ্চিত করতে পারেন:

• Meta Tags: <meta name="robots" content="noindex, nofollow"> ব্যবহার করুন যাতে সার্চ ইঞ্জিন ভুল URL গুলি ইনডেক্স না করে।
• Custom Title: 404 পেজের জন্য আলাদা টাইটেল প্রদান করুন, যেমন "Page Not Found"।

import Head from 'next/head'

export default function Custom404() {
  return (
    <>
      <Head>
        <title>Page Not Found - My Site</title>
        <meta name="robots" content="noindex, nofollow" />
      </Head>
      <div style={{ textAlign: 'center', padding: '50px' }}>
        <h1 style={{ fontSize: '72px', color: '#ff0000' }}>404</h1>
        <h2>Oops! Page not found</h2>
        <p>The page you're looking for does not exist.</p>
        <Link href="/">
          <a style={{ color: '#0070f3', textDecoration: 'underline' }}>Go back to home</a>
        </Link>
      </div>
    </>
  )
}

এখানে, Head কম্পোনেন্ট ব্যবহার করা হয়েছে যাতে কাস্টম টাইটেল এবং noindex, nofollow মেটা ট্যাগ যুক্ত করা যায়।

৫. 404 পেজের পরিক্ষা

আপনার কাস্টম 404 পেজ তৈরির পর, এটি পরীক্ষা করে দেখতে হবে যে এটি ঠিকভাবে কাজ করছে কি না:

1. আপনার অ্যাপ চালু করুন এবং এমন কোনো URL প্রবেশ করুন যা আপনার অ্যাপে নেই (যেমন: http://localhost:3000/nonexistent-page).
2. যদি সব কিছু ঠিকঠাক থাকে, তাহলে আপনার কাস্টম 404 পেজটি প্রদর্শিত হবে।

সারাংশ

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