يوفر 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> العادي (الذي يفرض إعادة تحميل كاملة) هو ما يبقي التطبيق سريعاً ويحافظ على حالة التخطيط.