Next.jsBeginner

Linking ও Navigation

Link component, useRouter, prefetching ও client-side navigation — বাংলা গাইড।

11টি অংশবাংলা ভাষায়

Next.js-এ navigation-এর প্রধান উপায় হলো `<Link>` component (next/link থেকে), যা browser-কে full reload না করেই client-side navigation করে।

Link Component

app/page.tsxtsx

tsx

import Link from "next/link";

export default function Page() {
  return (
    <nav>
      <Link href="/">Home</Link>
      <Link href="/blog">Blog</Link>
      <Link href="/blog/my-first-post">First Post</Link>
    </nav>
  );
}

Dynamic Link

app/blog/page.tsxtsx

tsx

import Link from "next/link";

export default async function BlogPage() {
  const posts = await fetch("https://api.vercel.app/blog").then((r) =>
    r.json()
  );

  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>
          <Link href={`/blog/${post.slug}`}>{post.title}</Link>
        </li>
      ))}
    </ul>
  );
}

useRouter Hook

Programmatic navigation-এর জন্য (form submit-এর পরে) useRouter ব্যবহার করুন — এটি একটি Client Component hook।

app/ui/button.tsxtsx

tsx

"use client";

import { useRouter } from "next/navigation";

export default function Button() {
  const router = useRouter();

  return (
    <button type="button" onClick={() => router.push("/dashboard")}>
      Go to Dashboard
    </button>
  );
}

Prefetching

<Link>-এ থাকা route viewport-এ প্রবেশ করলেই auto-prefetch হয় — ব্যবহারকারী ক্লিক করার আগেই data প্রস্তুত। ফলে navigation instant মনে হয়।

Full reload এড়িয়ে চলুন

<a> tag পরের page-এ গেলে full reload হয় — স্লো। তাই internal navigation-এ সবসময় <Link> ব্যবহার করুন। বাইরের সাইটে যেতে <a> ঠিক আছে।

শেষ প্যারায় নিজে practice করুন — কোড কপি করে নিজের এডিটরে চালিয়ে দেখুন।