Next.js client-side navigation فراہم کرتا ہے جو مکمل صفحہ ریلوڈ سے تیز ہے — یہ صرف نئے صفحے کے ڈیٹا/components کو حاصل کرتا ہے اور انہیں تبدیل کرتا ہے، مشترکہ layouts کو mounted رکھتے ہوئے۔
;
() {
(
);
}
<Link> ایک <a> render کرتا ہے لیکن client-side navigation کے لیے کلک کو intercept کرتا ہے۔ اہم بات یہ ہے کہ یہ prefetches لنک شدہ route کو جب link viewport میں داخل ہو، تاکہ navigation فوری محسوس ہو۔
"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
}
}
جب navigation منطق کے جواب میں ہونا ہو (form submit کے بعد، login وغیرہ) تو useRouter استعمال کریں، نہ کہ کسی link پر کلک کریں۔
<Link> آپ کے کلک سے پہلے routes کو preload کرتا ہے۔App Router میں، hooks next/navigation سے آتے ہیں (useRouter, usePathname, useSearchParams) — پرانے next/router سے نہیں (جو صرف Pages Router کے لیے ہے)۔ انہیں خلط کرنا ایک عام غلطی ہے۔
<Link> (خودکار prefetching کے ساتھ) اور useRouter وہی ہیں جو آپ تیز، SPA کی طرح navigation بناتے ہیں جس کے لیے Next.js معروف ہے۔
سادہ <a href> استعمال کرنے کی بجائے (جو مکمل reload کو مجبور کرتا ہے) ان کا استعمال وہی ہے جو app کو تیز رکھتا ہے اور layout state محفوظ کرتا ہے۔