Next.js क्लायंट-साइड नेव्हिगेशन प्रदान करते जो संपूर्ण पृष्ठ रीलोडपेक्षा वेगवान आहे — हे फक्त नव्या पृष्ठाचा डेटा/घटक मिळवितो आणि त्यांची अदलाबदल करितो, सामायिक लेआउट माउंट केलेले ठेवितो.
Link घटक (घोषणात्मक)
tsx
;
() {
(
);
}
<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> (जो संपूर्ण रीलोड करतो) च्या जागी त्यांचा वापर करणे हेच आहे जे अॅप वेगवान ठेवते आणि लेआउट स्थिती संरक्षित करते.