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> (જે સંપૂર્ણ રિલોડ દબાણ કરે છે) ની જગ્યાએ વાપરવું તે છે જે એપ્લિકેશનને ઝડપી રાખે છે અને લેઆઉટ સ્થિતિ સંરક્ષિત કરે છે.