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 बाट आयात गर्नुहोस्App Router मा, hooks next/navigation (useRouter, usePathname, useSearchParams) बाट आउँछन् — पुरानो next/router नभ (जो पेजेज राउटर मात्र हो)। तिनलाई मिश्रित गर्नु साधारण गल्ती हो।
<Link> (स्वचालित पूर्वनिर्मितको साथ) र useRouter कस्तो छिटो, SPA-जस्तो नेभिगेशन Next.js को लागि ज्ञात छ त्यो बनाउनु हो।
सादा <a href> (जो पूर्ण पुनः लोड गर्न बाध्य गर्छ) को सट्टा तिनलाई प्रयोग गर्नु यो हो जसले अनुप्रयोग द्रुत राख्छ र लेआउट अवस्था संरक्षण गर्छ।