useRouter()

التنقّل البرمجي من مكوّن عميل useRouter()

خطاف (hook) يمنحك router.push/replace/refresh/back/forward للتنقّل من كود جافاسكربت داخل مكوّن عميل.

يُستورد من next/navigation (وليس next/router — ذاك خاص بـ Pages Router القديم فقط). يُستخدم داخل مكوّن عليه 'use client'، وغالبًا لحالات ما يكفيها مكوّن Link العادي، متل التنقّل بعد نجاح عملية أو حدث معيّن.

refresh() تعيد طلب البيانات من الخادم لنفس المسار وتفرّغ كاش العميل، لكنها ما تبطل كاش الخادم — لذلك استخدم revalidatePath أو revalidateTag لإبطال البيانات فعليًا.

الصياغة

import { useRouter } from 'next/navigation';
const router = useRouter();
router.push(href) | router.replace(href) | router.refresh() | router.back() | router.forward()

📄 مثال

'use client';

import { useRouter } from 'next/navigation';

export default function LogoutButton() {
  const router = useRouter();

  return (
    <button onClick={() => { logout(); router.push('/login'); }}>
      تسجيل الخروج
    </button>
  );
}

أهم النقاط

العنصر	الوظيفة
push(href)	ينقل ويضيف سجلًا جديدًا لتاريخ المتصفح
replace(href)	ينقل بدون إضافة سجل جديد لتاريخ المتصفح
refresh()	يعيد طلب البيانات من الخادم لنفس المسار بدون فقدان state محلي

💡 نصائح عملية

استخدم مكوّن Link بدل useRouter لأي رابط عادي — التمرير التلقائي والـ prefetch جاهزين فيه
لا تمرّر روابط غير موثوقة (من مدخلات مستخدم) مباشرة لـ push أو replace — قد تفتح ثغرة XSS

⚠️ أخطاء شائعة

استيرادها من next/router بدل next/navigation — next/router خاص بـ Pages Router القديم فقط
استخدام refresh() وتوقّع إبطال كاش الخادم — استخدم revalidatePath أو revalidateTag لذلك

🎓 تريد فهم الصورة الكاملة خطوة بخطوة؟ ابدأ من مسار NEXTJS الكامل بالعربي.