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 Next.js కోసం తెలిసిన వేగవంతమైన, SPA-సారూప్య నావిగేషన్ను రూపొందించే విధానం.
సాధారణ <a href> ప్రతిபదులలో వాటిని ఉపయోగించడం (ఇది పూర్తి రీలోడ్ను బలవంతం చేస్తుంది) యాప్ను వేగవంతంగా ఉంచుతుంది మరియు లేআউట్ స్టేట్ను సంరక్షిస్తుంది.