Next.js უზრუნველყოფს კლიენტის მხარეს ნავიგაციას, რომელიც უფრო სწრაფია სრული გვერდის ხელახლა ჩატვირთვისთან - ის მხოლოდ ახალი გვერდის მონაცემებს/კომპონენტებს ატვირთავს და მათ ცვლის, რაც შეინარჩუნებს საერთო განლაგებას.
;
() {
(
);
}
<Link> აკეთებს <a>-ს, მაგრამ უკეთ ჩაჭრის დაჭერას კლიენტის მხარეს ნავიგაციისთვის. გადამწყვეტი, ის prefetch-ის დაკავშირებულ მარშრუტს, როდესაც ბმული 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, როდესაც ნავიგაცია უნდა მოხდეს ლოგიკაზე საპასუხოდ (ფორმის გაგზავნის შემდეგ, შესვლის შემდეგ და ა.შ.), არა ბმულზე დაჭერა.
<Link> წინასწარ იტვირთება მარშრუტებს თქვენი დაჭერამდე.App Router-ში, hooks მოდის next/navigation-დან (useRouter, usePathname, useSearchParams) — არა ძველი next/router-დან (რომელიც მხოლოდ Pages Router-ია). მათი შერევა საერთო შეცდომაა.
<Link> (ავტომატური prefetch-ით) და useRouter ის გზა, რომლითაც თქვენ აგებენ სწრაფი, SPA-სთან მსგავსი ნავიგაციას, რომელიც Next.js ცნობილია.
მათი გამოყენება უბრალო <a href>-ის ნაცვლად (რომელიც აიძულებს სრულ ხელახლა ჩატვირთვას) ის რაც აბა ის მოქმედებას სწრაფად და ინარჩუნებს განლაგების state-ს.