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> আপনি ক্লিক করার আগে রুট প্রি-লোড করে।অ্যাপ রাউটারে, হুক next/navigation থেকে আসে (useRouter, usePathname, useSearchParams) — পুরানো next/router থেকে নয় (যা শুধুমাত্র পৃষ্ঠা রাউটারের জন্য)। এগুলি মিশ্রিত করা একটি সাধারণ ত্রুটি।
<Link> (স্বয়ংক্রিয় পূর্ব-লোডিং সহ) এবং useRouter হল দ্রুত, SPA-এর মতো নেভিগেশন তৈরি করার উপায় যার জন্য Next.js পরিচিত।
সাধারণ <a href> ব্যবহার করার পরিবর্তে তাদের ব্যবহার করা (যা সম্পূর্ণ রিলোড জোর করে) অ্যাপকে দ্রুত রাখে এবং লেআউট স্টেট সংরক্ষণ করে।