Next.js 16.3-এ একটি পরীক্ষামূলক useOffline hook যুক্ত করা হয়েছে, যা ব্রাউজার নেটওয়ার্ক সংযোগ বিচ্ছিন্ন হওয়ার সাথে সাথেই একটি কম্পোনেন্টকে প্রতিক্রিয়া জানাতে সাহায্য করে। const isOffline = useOffline() কল করার মাধ্যমে আপনি তাৎক্ষণিকভাবে UI পরিবর্তন করতে পারেন – উদাহরণস্বরূপ, কোনো রিকোয়েস্ট ফেইল হওয়ার জন্য অপেক্ষা না করেই মূল অ্যাপের পরিবর্তে “You are offline” প্রদর্শন করতে পারেন।

কেন এই hook এখন গুরুত্বপূর্ণ

ডেভেলপাররা দীর্ঘকাল ধরে ব্রাউজারের online/offline ইভেন্টগুলোর ওপর নির্ভর করে আসছেন, কিন্তু সেই ইভেন্টগুলো লো-লেভেল এবং সেগুলোর জন্য ম্যানুয়াল ওয়্যারিং প্রয়োজন হয়। Next.js-এর নতুন hookটি এই boilerplate কোডকে একটি লাইনে নিয়ে আসে, যা ফ্রেমওয়ার্কের React-first প্যারাডাইমের সাথে চমৎকারভাবে মানিয়ে যায়। এর তাৎক্ষণিক সুবিধা হলো আরও মসৃণ ইউজার এক্সপেরিয়েন্স: যে বাটনগুলোর জন্য লাইভ API প্রয়োজন সেগুলো ডিজেবল করা যেতে পারে, ফর্মগুলো ব্লক করা যেতে পারে এবং সংযোগ বিচ্ছিন্ন হওয়ার সাথে সাথেই একটি বন্ধুত্বপূর্ণ নোটিশ দেখানো যেতে পারে। এটি সেই সব নীরব ত্রুটি (silent errors) প্রতিরোধ করে যা সাধারণত একটি fetch ফেইল করার পরেই প্রকাশ পায়।

কীভাবে এটি একটি পেজে যুক্ত করবেন

import { useOffline } from 'next/navigation';

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

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

এই hookটি একটি boolean রিটার্ন করে যা রিয়েল টাইমে আপডেট হয়, ফলে যেকোনো কন্ডিশনাল রেন্ডারিং বা ইফেক্ট তাৎক্ষণিকভাবে কাজ করতে পারে। যেহেতু এটি next/navigation প্যাকেজের অন্তর্ভুক্ত, তাই এটি ক্লায়েন্ট-সাইড রেন্ডার করা পেজ এবং ক্লায়েন্টে হাইড্রেট হওয়া সার্ভার-কম্পোনেন্ট—উভয় ক্ষেত্রেই কাজ করে।

যে সীমাবদ্ধতাগুলোর জন্য আপনাকে পরিকল্পনা করতে হবে

এই hookটি কোনো সাইটকে অফলাইন-ফার্স্ট অ্যাপে রূপান্তর করে না। এটি কেবল কানেক্টিভিটি স্ট্যাটাস রিপোর্ট করে। নেটওয়ার্ক না থাকলেও কন্টেন্ট ব্যবহারযোগ্য রাখতে আপনাকে এখনও যা করতে হবে:

  • বিল্ট-ইন Next.js asset optimizer বা একটি service worker ব্যবহার করে স্ট্যাটিক অ্যাসেটগুলো ক্যাশ (cache) করুন।
  • IndexedDB বা অন্য কোনো ক্লায়েন্ট-সাইড স্টোরে ডায়নামিক ডেটা সংরক্ষণ করুন।
  • ফর্ম সাবমিশনের জন্য ব্যাকগ্রাউন্ড সিঙ্ক বা রিট্রাই লজিক ইমপ্লিমেন্ট করুন।

এই বিষয়গুলো ছাড়া, UI ব্যবহারকারীকে জানাতে পারে যে তারা অফলাইনে আছেন, কিন্তু অ্যাপটি তবুও নতুন ডেটা লোড করতে সক্ষম হবে না।

একটি পরীক্ষামূলক API ব্যবহারের ঝুঁকি

যেহেতু useOffline-কে পরীক্ষামূলক হিসেবে চিহ্নিত করা হয়েছে, তাই ভবিষ্যতে এর সিগনেচার বা আচরণ পরিবর্তিত হতে পারে। যেসব প্রজেক্ট এই hook-টিকে কোর বিজনেস লজিকের সাথে যুক্ত করে ফেলে, Next.js আপডেট হলে তাদের তা সমন্বয় করার প্রয়োজন হতে পারে। একটি বিচক্ষণ পদ্ধতি হলো hook-টিকে একটি ইন্টারনাল ইউটিলিটির মাধ্যমে র‍্যাপ (wrap) করে রাখা, যাতে API পরিবর্তিত হলে সহজেই তা পরিবর্তন করা যায়।

পরবর্তীতে যা খেয়াল রাখতে হবে

Next.js আসন্ন রিলিজগুলোতে আরও ব্যাপক অফলাইন সাপোর্টের ইঙ্গিত দিয়েছে, যা সম্ভবত সরাসরি ফ্রেমওয়ার্কের সাথে ক্যাশিং স্ট্র্যাটেজিগুলোকে যুক্ত করবে। এটি “experimental” থেকে “stable” পর্যায়ে যাচ্ছে কি না, তা রিলিজ নোটের মাধ্যমে খেয়াল রাখুন এবং useOffline-এর পরিপূরক হিসেবে স্বয়ংক্রিয় ডেটা পারসিস্টেন্স (data persistence) প্রদানকারী নতুন API-গুলোর দিকে নজর রাখুন।

সারকথা: useOffline ডেভেলপারদের কানেক্টিভিটি বিচ্ছিন্নতা শনাক্ত করতে এবং UI কাস্টমাইজ করতে একটি দ্রুত উপায় দেয়, তবে এটি কেবল প্রথম পদক্ষেপ। একটি শক্তিশালী অফলাইন অভিজ্ঞতার জন্য এখনও সুনির্দিষ্ট ক্যাশিং এবং সিঙ্ক মেকানিজম প্রয়োজন, এবং hook-টির পরীক্ষামূলক অবস্থার কারণে টিমগুলোর উচিত এর ব্যবহার আলাদাভাবে (isolate) রাখা যাতে ভবিষ্যতে রিফ্যাক্টরিংয়ের ঝামেলা এড়ানো যায়।