Next.js 16.3 يضيف Hook useOffline التجريبي للكشف الفوري عن حالة الاتصال

يأتي إصدار Next.js 16.3 مع hook تجريبي باسم useOffline يتيح للمكون (component) التفاعل في اللحظة التي يفقد فيها المتصفح اتصاله بالشبكة. من خلال استدعاء const isOffline = useOffline()، يمكنك تبديل واجهة المستخدم (UI) فوراً – على سبيل المثال، عرض رسالة "أنت غير متصل بالإنترنت" بدلاً من التطبيق الرئيسي – دون انتظار فشل الطلب.

لماذا يكتسب هذا الـ hook أهمية الآن

لطالما اعتمد المطورون على أحداث online/offline الخاصة بالمتصفح، لكن هذه الأحداث منخفضة المستوى (low-level) وتتطلب ربطاً يدوياً. يقوم الـ hook الجديد في Next.js بتجريد الأكواد المتكررة (boilerplate) في سطر واحد، مما يتناسب تماماً مع نموذج العمل القائم على React في الإطار البرمجي. الفائدة المباشرة هي تجربة مستخدم أكثر سلاسة: حيث يمكن تعطيل الأزرار التي تتطلب API مباشراً، ومنع إرسال النماذج، وظهور تنبيه ودي في اللحظة التي ينقطع فيها الاتصال. وهذا يمنع حدوث أخطاء صامتة قد لا تظهر إلا بعد فشل عملية جلب البيانات (fetch).

كيفية إضافته إلى صفحة

import { useOffline } from 'next/navigation';

export default function Home() {
  const isOffline = useOffline();

  return isOffline ? (
    <p>You are offline</p>
  ) : (
    <App />
  );
}

يعيد الـ hook قيمة منطقية (boolean) يتم تحديثها في الوقت الفعلي، لذا يمكن لأي عملية عرض شرطي (conditional rendering) أو تأثير (effect) أن يتفاعل فوراً. وبما أنه موجود في حزمة next/navigation ، فإنه يعمل على كل من الصفحات التي يتم عرضها من جانب العميل (client-side rendered) والمكونات التي تعمل من جانب الخادم (server-components) والتي يتم تنشيطها (hydrate) على جانب العميل.

القيود التي يجب عليك التخطيط لها

الـ hook لا يحول الموقع إلى تطبيق يعمل أولاً بدون اتصال (offline-first). هو ببساطة يبلغ عن حالة الاتصال. لضمان بقاء المحتوى قابلاً للاستخدام عند انقطاع الشبكة، لا يزال يتعين عليك القيام بما يلي:

• تخزين الأصول الثابتة مؤقتاً (Cache) باستخدام محسن أصول Next.js المدمج أو عبر service worker.
• تخزين البيانات الديناميكية في IndexedDB أو أي مخزن آخر من جانب العميل.
• تنفيذ مزامنة في الخلفية (background sync) أو منطق إعادة المحاولة لإرسال النماذج.

بدون هذه العناصر، قد تبلغ واجهة المستخدم المستخدم بأنه غير متصل، ولكن سيظل التطبيق غير قادر على تحميل بيانات جديدة.

مخاطر استخدام API تجريبي

نظرًا لأن useOffline مصنف كـ "تجريبي"، فقد تتغير بنيته (signature) أو سلوكه في إصدار مستقبلي. المشاريع التي تدمج الـ hook في منطق العمل الأساسي (core business logic) قد تحتاج إلى إجراء تعديلات عند تحديث Next.js. النهج الحكيم هو تغليف الـ hook خلف أداة مساعدة داخلية (internal utility) يمكن استبدالها إذا تطور الـ API.

ما الذي يجب مراقبته لاحقاً

ألمح Next.js إلى دعم أوسع للعمل بدون اتصال في الإصدارات القادمة، وربما دمج استراتيجيات التخزين المؤقت (caching) مباشرة في الإطار البرمجي. تابع ملاحظات الإصدار (release notes) لأي تحول من الحالة "التجريبية" إلى الحالة "المستقرة"، ولأي واجهات برمجة تطبيقات (APIs) جديدة تكمل useOffline مع ميزة حفظ البيانات التلقائي (automatic data persistence).

الخلاصة: يوفر useOffline للمطورين طريقة سريعة لاكتشاف فقدان الاتصال وتخصيص واجهة المستخدم، ولكنه مجرد الخطوة الأولى. لا تزال تجارب العمل بدون اتصال القوية تتطلب آليات تخزين مؤقت ومزامنة صريحة، كما أن الحالة التجريبية للـ hook تعني أنه يجب على الفرق عزل استخدامه لتجنب صداع إعادة هيكلة الكود (refactoring) في المستقبل.