Το Next.js παρέχει πλοήγηση από την πλευρά του πελάτη που είναι ταχύτερη από μια πλήρη επαναφόρτωση σελίδας — ανακτά μόνο τα δεδομένα/συστατικά της νέας σελίδας και τα ανταλλάσσει, διατηρώντας τις κοινόχρηστες διατάξεις που έχουν τοποθετηθεί.
;
() {
(
);
}
<Link> αποδίδει ένα <a> αλλά παρεμποδίζει το κλικ για πλοήγηση από την πλευρά του πελάτη. Κρίσιμα, προφέρνει τη συνδεδεμένη διαδρομή όταν ο σύνδεσμος εισέρχεται στο viewport, καθιστώντας τη πλοήγηση άμεση.
"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 όταν η πλοήγηση πρέπει να συμβεί ως απάντηση σε λογική (μετά την υποβολή ενός σχηματοsPHP, σύνδεση, κ.λπ.), όχι σε ένα κλικ σε ένα σύνδεσμο.
<Link> προφορτώνει διαδρομές πριν κάνετε κλικ.Στο App Router, τα hooks προέρχονται από next/navigation (useRouter, usePathname, useSearchParams) — όχι από το παλιό next/router (το οποίο είναι μόνο Pages Router). Η σύγχυσή τους είναι ένα κοινό σφάλμα.
<Link> (με αυτόματη προφέρνηση) και useRouter είναι ο τρόπος με τον οποίο δημιουργείτε την ταχεία πλοήγηση που μοιάζει με SPA για την οποία είναι γνωστό το Next.js.
Η χρήση τους αντί για απλό <a href> (που επιβάλλει πλήρη επαναφόρτωση) είναι αυτό που κρατά την εφαρμογή γρήγορη και διατηρεί την κατάσταση διάταξης.