Linking আর Navigating – Next.js এ কীভাবে কাজ করে?

ভাবুন, আপনি একটা Daraz টাইপ ই-কমার্স ওয়েবসাইট বানাচ্ছেন।
ইউজার এক পেজ থেকে আরেক পেজে যাবে – যেমন Home থেকে Product Details, বা Cart থেকে Checkout।

এখন প্রশ্ন হচ্ছে, ইউজার যখন লিঙ্কে ক্লিক করবে তখন কী হবে?
পুরো পেজ কি আবার reload হবে? নাকি শুধু দরকারি অংশ বদলাবে?

এই টিউটোরিয়ালে আপনি খুব সহজ ভাষায় শিখবেন –
Next.js এ Linking আর Navigating কীভাবে কাজ করে, আর কীভাবে এটাকে দ্রুত আর স্মুথ করা যায়।

১. Server Rendering – শুরু এখান থেকেই

Next.js by default server এ render করে।
মানে, আপনি যখন /blog এ যান তখন server থেকে response আসে, তারপর পেজ লোড হয়।

এটার দুইটা স্টাইল আছে –

• Static Rendering (Prerendering)
  ধরুন, আপনার সাইটে একটা About Us পেজ আছে। এটা বারবার বদলায় না। Next.js এটা build time এ বানিয়ে রাখে।
• Dynamic Rendering
  ধরুন, আপনার সাইটে Order Details পেজ আছে। User ID বা Order ID অনুযায়ী data বদলায়। তখন server থেকে নতুন করে বানিয়ে দেয়।

২. Prefetching – আগেভাগে ডাটা নিয়ে রাখা

ধরুন, আপনি জানেন কেউ আসবে।
তাই আগে থেকেই রান্না করে রাখেন।
Guest আসলেই সাথে সাথে খাবার দিতে পারবেন।

Next.js এ <Link> component automatically prefetch করে।
মানে, ইউজার লিঙ্ক দেখলেই Next.js background এ ডাটা নিয়ে আসে।

import Link from "next/link";
 
export default function Layout() {
  return (
    <nav>
      {/* এইটা prefetch হবে */}
      <Link href="/blog">Blog</Link>
 
      {/* এইটা normal link */}
      <a href="/contact">Contact</a>
    </nav>
  );
}

এখানে Blog লিঙ্ক viewport এ এলেই Next.js ডাটা নিয়ে আসবে।
তাই ইউজার ক্লিক করলেই Blog পেজ ঝটপট খুলে যাবে।
কিন্তু Contact লিঙ্কে prefetch হবে না, তাই একটু সময় লাগতে পারে।

৩. Streaming – ধাপে ধাপে কনটেন্ট দেখানো

কখনও বড় রান্না হলে,
সব একসাথে পরিবেশন করা যায় না।
আগে সালাদ, পরে বিরিয়ানি, শেষে মিষ্টি।

Next.js এ আপনি শুধু একটা loading.tsx ফাইল বানিয়ে দিলেই,
Next.js প্রথমে loading দেখাবে, পরে আসল কনটেন্ট দেখাবে।

// app/dashboard/loading.tsx
export default function Loading() {
  return <p>লোড হচ্ছে...</p>;
}

এতে ইউজার বুঝতে পারবেন – “হ্যাঁ, সাইট কাজ করছে, ডাটা আসছে।”

৪. Client-side Transition – পেজ reload ছাড়াই মজা

আগে ওয়েবসাইটে পেজ change করলে পুরো পেজ reload হতো।
সবকিছু আবার লোড হতো, স্ক্রল চলে যেত।

Next.js এ <Link> দিয়ে গেলে শুধু কনটেন্ট বদলায়।
Navbar, footer, স্ক্রল ঠিক থাকে।

এটা ঠিক যেমন আপনি Facebook এ Newsfeed scroll করেন।
নতুন পোস্ট খুললেও পুরো সাইট reload হয় না।

৫. কখন Navigation ধীর মনে হয়?

সবকিছু সুন্দর হলেও কিছু সময় সমস্যা হতে পারে –

1. Dynamic route এ loading.tsx নাই
   /blog/[slug] এ গেলে ইউজার খালি স্ক্রিন দেখবেন।
   তাই অবশ্যই loading UI দিন।
2. Slow network
   গ্রামের 3G তে বসে আছেন। Prefetch শেষ হওয়ার আগেই ক্লিক করলে দেরি হতে পারে।
   সমাধান: ছোট একটা spinner বা progress bar দেখান।
3. অনেক লিঙ্ক একসাথে prefetch করলে
   ধরুন, university noticeboard এ ১০০০টা লিঙ্ক আছে।
   সব prefetch করলে server চাপ খাবে।
   সমাধান: শুধু hover করলে prefetch করুন।

৬. Real Bangladeshi Example – History API

(ক) Product Sorting (pushState)

Daraz এ গেছেন → Product list দেখছেন।
এখন “Low to High” দিয়ে sort করছেন।
URL change হচ্ছে, কিন্তু পেজ reload হচ্ছে না।

"use client";
import { useSearchParams } from "next/navigation";
 
export default function SortProducts() {
  const searchParams = useSearchParams();
 
  function updateSorting(order) {
    const params = new URLSearchParams(searchParams.toString());
    params.set("sort", order);
    window.history.pushState(null, "", `?${params.toString()}`);
  }
 
  return (
    <>
      <button onClick={() => updateSorting("asc")}>Low to High</button>
      <button onClick={() => updateSorting("desc")}>High to Low</button>
    </>
  );
}

এখানে back button চাপলে আগের sorting এ ফিরে যেতে পারবেন।

(খ) Language Switch (replaceState)

সরকারি ওয়েবসাইটে English ↔ Bangla switch করছেন।
এখানে back চাপলে আগের ভাষায় ফিরে যাওয়া যাবে না।

"use client";
import { usePathname } from "next/navigation";
 
export function LocaleSwitcher() {
  const pathname = usePathname();
 
  function switchLocale(locale) {
    const newPath = `/${locale}${pathname}`;
    window.history.replaceState(null, "", newPath);
  }
 
  return (
    <>
      <button onClick={() => switchLocale("en")}>English</button>
      <button onClick={() => switchLocale("bn")}>বাংলা</button>
    </>
  );
}

৭. Link Component – Next.js এ Navigation আরও সহজ

Next.js এ <Link> component ব্যবহার করলে
পেজ দ্রুত লোড হয়, client-side এ smooth ভাবে যায়।

import Link from "next/link";
 
export default function Menu() {
  return (
    <nav>
      <Link href="/">হোম</Link>
      <Link href="/products">সব প্রোডাক্ট</Link>
      <Link href="/cart">কার্ট</Link>
    </nav>
  );
}

এখানে আপনি চাইলে prefetch={false} দিয়ে prefetch বন্ধও করতে পারেন।

৮. Active Link দেখানো

ইউজার কোন পেজে আছে সেটা দেখাতে active link হাইলাইট করা যায়।

import Link from "next/link";
import { usePathname } from "next/navigation";
 
export default function Nav() {
  const pathname = usePathname();
 
  return (
    <nav>
      <Link href="/" className={pathname === "/" ? "active" : ""}>
        হোম
      </Link>
      <Link href="/about" className={pathname === "/about" ? "active" : ""}>
        আমাদের সম্পর্কে
      </Link>
    </nav>
  );
}

৯. Custom Navigation – useRouter Hook

কখনও কখনও আপনাকে প্রোগ্রামেটিক্যালি navigate করতে হতে পারে।
Next.js এ useRouter hook দিয়ে এটা সহজে করা যায়।

"use client";
import { useRouter } from "next/navigation";
 
export default function GoToCartButton() {
  const router = useRouter();
 
  function handleClick() {
    router.push("/cart");
  }
 
  return <button onClick={handleClick}>কার্টে যান</button>;
}

১০. Route Change Events – Loader দেখানো

Navigation শুরু হলে loader দেখাতে চাইলে
next/navigation এর events ব্যবহার করতে পারেন।

"use client";
import { useEffect } from "react";
import { useRouter } from "next/navigation";
 
export default function LoaderOnRouteChange() {
  const router = useRouter();
 
  useEffect(() => {
    const handleStart = () => {
      // loader দেখান
    };
    const handleComplete = () => {
      // loader বন্ধ করুন
    };
 
    router.events.on("routeChangeStart", handleStart);
    router.events.on("routeChangeComplete", handleComplete);
 
    return () => {
      router.events.off("routeChangeStart", handleStart);
      router.events.off("routeChangeComplete", handleComplete);
    };
  }, [router]);
 
  return null;
}

১১. Mobile Navigation – Drawer বা Bottom Nav

মোবাইল সাইটে Drawer বা Bottom Navigation ব্যবহার করা যায়।
Next.js এ এগুলোও সহজে করা যায়।

১২. SEO – Link vs a tag

SEO ভালো রাখতে Next.js এ <Link> ব্যবহার করা উচিত।
কারণ, client-side navigation হলেও Google bot ঠিকমতো বুঝতে পারে।

শেষ কথা

Next.js এ Linking আর Navigating খুবই সহজ।

• Prefetching আগেভাগে ডাটা নিয়ে আসে
• Streaming loading UI দেখায়
• Client-side transition reload ছাড়াই smooth experience দেয়
• Custom navigation, loader, active link – সবই সহজে করা যায়

বাংলাদেশি real life example ধরুন –
আপনি Daraz এ প্রোডাক্ট দেখছেন, Bkash app এ পেজ change করছেন, বা Facebook এ পোস্ট scroll করছেন।
এই সব জায়গায় user smooth experience পায় কারণ তারা এই optimizations use করছে।

Next.js আমাদের একই জিনিস ready-made দিয়েই দিয়েছে।
শুধু সঠিকভাবে use করতে হবে। 🚀