Next.js সম্পূর্ণ পৃষ্ঠা পুনরায় লোড করার চেয়ে দ্রুত ক্লায়েন্ট-সাইড নেভিগেশন প্রদান করে — এটি শুধুমাত্র নতুন পৃষ্ঠার ডেটা/উপাদান আনে এবং সেগুলি অদলবদল করে, ভাগ করা লেআউটগুলি মাউন্ট রাখে।
Link উপাদান (ঘোষণামূলক)
tsx
;
() {
(
);
}
Next.js সম্পূর্ণ পৃষ্ঠা পুনরায় লোড করার চেয়ে দ্রুত ক্লায়েন্ট-সাইড নেভিগেশন প্রদান করে — এটি শুধুমাত্র নতুন পৃষ্ঠার ডেটা/উপাদান আনে এবং সেগুলি অদলবদল করে, ভাগ করা লেআউটগুলি মাউন্ট রাখে।
;
() {
(
);
}
<Link> একটি <a> রেন্ডার করে তবে ক্লায়েন্ট-সাইড নেভিগেশনের জন্য ক্লিকটি বাধা দেয়। গুরুত্বপূর্ণভাবে, এটি লিঙ্কটি ভিউপোর্টে প্রবেশ করলে লিঙ্ক করা রুট প্রি-ফেচ করে, তাই নেভিগেশন তাত্ক্ষণিক বোধ করে।
"use client"; // useRouter needs a Client Component
import { useRouter } from "next/navigation"; // note: next/navigation in App Router
export default function LoginForm() {
const router = useRouter();
async function onSubmit() {
await login();
router.push("/dashboard"); // navigate after an action
// router.replace("/x") — no history entry
// router.back() — go back
// router.refresh() — re-fetch server data for the current route
}
}
লিঙ্কে ক্লিক করার পরিবর্তে যখন নেভিগেশন অবশ্যই লজিকের প্রতিক্রিয়ায় ঘটবে (একটি ফর্ম জমা দেওয়ার পরে, লগইনের পরে, ইত্যাদি) তখন useRouter ব্যবহার করুন।
<Link> আপনি ক্লিক করার আগেই রুট প্রি-লোড করে।App Router-এ, হুকগুলি next/navigation থেকে আসে (useRouter, usePathname, useSearchParams) — পুরানো next/router থেকে নয় (যা শুধুমাত্র Pages Router)। সেগুলি মিশ্রিত করা একটি সাধারণ ত্রুটি।
<Link> (স্বয়ংক্রিয় প্রি-ফেচিং সহ) এবং useRouter হল আপনি দ্রুত, SPA-এর মতো নেভিগেশন তৈরি করার উপায় যার জন্য Next.js পরিচিত।
সাধারণ <a href> (যা সম্পূর্ণ পুনরায় লোড করতে বাধ্য করে) এর পরিবর্তে সেগুলি ব্যবহার করা হল যা অ্যাপটিকে দ্রুত রাখে এবং লেআউট অবস্থা সংরক্ষণ করে।