Next.js 16.3 memperkenalkan hook useOffline eksperimental yang membolehkan komponen bertindak balas sebaik sahaja pelayar memutuskan sambungan rangkaiannya. Dengan memanggil const isOffline = useOffline(), anda boleh menukar UI secara serta-merta – sebagai contoh, memaparkan “Anda luar talian” dan bukannya aplikasi utama – tanpa perlu menunggu permintaan (request) gagal.

Mengapa hook ini penting sekarang

Pembangun telah lama bergantung pada acara online/offline pelayar, tetapi acara tersebut adalah tahap rendah (low-level) dan memerlukan penyambungan manual. Hook baharu Next.js meringkaskan kod boilerplate kepada satu baris sahaja, sesuai dengan paradigma React-first rangka kerja tersebut. Manfaat serta-merta adalah pengalaman pengguna yang lebih lancar: butang yang memerlukan API langsung boleh dinyahaktifkan, borang boleh disekat, dan pemberitahuan mesra boleh muncul sebaik sahaja sambungan terputus. Ini dapat mengelakkan ralat senyap yang biasanya hanya muncul selepas kegagalan fetch.

Cara menambahkannya ke dalam halaman

import { useOffline } from 'next/navigation';

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

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

Hook ini mengembalikan nilai boolean yang dikemas kini dalam masa nyata, jadi sebarang rendering bersyarat atau kesan (effect) boleh bertindak balas secara serta-merta. Oleh kerana ia berada dalam pakej next/navigation, ia berfungsi pada halaman yang dirender di bahagian klien (client-side) dan juga komponen pelayan (server-components) yang dihidrasi pada klien.

Had yang perlu anda rancangkan

Hook ini tidak menukarkan laman web menjadi aplikasi "offline-first". Ia sekadar melaporkan status sambungan. Untuk memastikan kandungan tetap boleh digunakan apabila rangkaian tiada, anda masih perlu:

  • Simpan cache aset statik dengan pengoptimum aset Next.js terbina dalam atau service worker.
  • Simpan data dinamik dalam IndexedDB atau storan bahagian klien yang lain.
  • Laksanakan penyinkronan latar belakang (background sync) atau logik cubaan semula (retry logic) untuk penghantaran borang.

Tanpa komponen-komponen tersebut, UI mungkin memaklumkan pengguna bahawa mereka luar talian, tetapi aplikasi tetap tidak akan dapat memuatkan data baharu.

Risiko menggunakan API eksperimental

Oleh kerana useOffline ditandakan sebagai eksperimental, tandatangan (signature) atau tingkah lakunya boleh berubah dalam versi akan datang. Projek yang mengunci hook ini ke dalam logik perniagaan teras mungkin perlu membuat pelarasan apabila Next.js dikemas kini. Pendekatan yang bijak adalah dengan membungkus (wrap) hook tersebut di sebalik utiliti dalaman yang boleh ditukar jika API tersebut berkembang.

Apa yang perlu diperhatikan seterusnya

Next.js telah memberi bayangan tentang sokongan luar talian yang lebih luas dalam versi akan datang, kemungkinan dengan menyepadukan strategi caching secara terus ke dalam rangka kerja tersebut. Perhatikan nota keluaran (release notes) untuk sebarang peralihan daripada “eksperimental” kepada stabil, dan untuk API baharu yang melengkapkan useOffline dengan pengekalan data automatik.

Rumusan: useOffline memberikan cara pantas kepada pembangun untuk mengesan kehilangan sambungan dan menyesuaikan UI, tetapi ia hanyalah langkah pertama. Pengalaman luar talian yang teguh masih memerlukan mekanisme caching dan penyinkronan yang eksplisit, dan status eksperimental hook ini bermakna pasukan harus mengasingkan penggunaannya untuk mengelakkan masalah refactoring pada masa hadapan.