Kif tinaviga bejn il-paġni f'Next.js?

Question

Accepted Answer

Next.js jipprovdi **navigazzjoni tal-klient** li hija aktar mgħaġla minn għali sħiħ il-paġna — tella' biss id-data/komponenti tal-paġna ġdida u taħlithom, iżżomm il-layouts maqsuma mistruwa. ## Il-komponent Link (deklarattivu) ```tsx import Link from "next/link"; export default function Nav() { return ( ); } ``` `` jirrendera `` iżda jinterċetta l-klik għal-navigazzjoni tal-klient. Kritiċalment, **jippreferess** ir-rotta konnessa meta l-link idħol fil-viewport, għaldaqstant in-navigazzjoni ħsibu istantanja. ## Navigazzjoni programmatika (fil-maniglietti tal-avvenimenti) ```tsx "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 } } ``` Uża `useRouter` meta n-navigazzjoni iridu iseħħ b'reazzjoni għall-loġika (wara l-qbil tal-formul, l-accesso, eċċ.), mhux bil-klik fuq link. ## Għaliex in-navigazzjoni tal-klient hija mgħaġla - **Ebda għali sħiħ** — biss is-segmenti mibdula jiġu render mill-ġdid; il-layouts maqsuma jibqaʼu mistruwa. - **Preferenza** — `` jippreccedenti t-tagħbija tal-mogħdijiet qabel ma tikklikkja. - **Iħareġ l-istat** — il-layouts li ma nbidlux jifżaċċu l-istat tagħhom fuq in-navigazzjoni. ## Importanti: importa minn next/navigation Fil-App Router, il-hooks ġejjin minn `next/navigation` (`useRouter`, `usePathname`, `useSearchParams`) — *mhux* il-qadim `next/router` (li huwa Pages Router biss). Imissmiegħu hija żball komuni. ## Għaliex din hija importanti `` (b'preferenza awtomatika) u `useRouter` huma kif tibni n-navigazzjoni mħaggra u simili għall-SPA li Next.js huwa magħruf għaliha. Użahom minflok il-sempliċi `` (li taġbod għali sħiħ) hija dak li żżomm l-app malajr u jirpreserva l-istat tal-layout.