Next.js 16.3 представляет экспериментальный хук useOffline, который позволяет компоненту мгновенно реагировать на момент потери браузером сетевого соединения. Вызывая const isOffline = useOffline(), вы можете мгновенно переключать интерфейс — например, отображать «Вы не в сети» вместо основного приложения — не дожидаясь ошибки запроса.

Почему этот хук важен именно сейчас

Разработчики давно полагались на события браузера online/offline, но эти события являются низкоуровневыми и требуют ручной настройки. Новый хук Next.js инкапсулирует шаблонный код в одну строку, органично вписываясь в парадигму фреймворка, ориентированную на React. Непосредственным преимуществом является более плавный пользовательский опыт: кнопки, требующие живого API, могут быть заблокированы, формы могут быть ограничены, а дружелюбное уведомление может появиться в ту же секунду, как пропадет связь. Это предотвращает возникновение «тихих» ошибок, которые в противном случае проявились бы только после неудачного fetch-запроса.

Как добавить его на страницу

import { useOffline } from 'next/navigation';

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

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

Хук возвращает логическое значение (boolean), которое обновляется в режиме реального времени, поэтому любой условный рендеринг или эффект может мгновенно отреагировать. Поскольку он находится в пакете next/navigation, он работает как на страницах с клиентским рендерингом, так и в серверных компонентах (server-components), которые гидрируются на клиенте.

Ограничения, которые нужно учитывать

Хук не превращает сайт в offline-first приложение. Он лишь сообщает о статусе соединения. Чтобы контент оставался доступным при отсутствии сети, вам все равно придется:

  • Кэшировать статические ресурсы с помощью встроенного оптимизатора ресурсов Next.js или service worker.
  • Хранить динамические данные в IndexedDB или другом клиентском хранилище.
  • Реализовать фоновую синхронизацию или логику повторных попыток для отправки форм.

Без этих компонентов интерфейс может сообщить пользователю, что он не в сети, но приложение по-прежнему не сможет загружать новые данные.

Риски использования экспериментального API

Поскольку useOffline помечен как экспериментальный, его сигнатура или поведение могут измениться в будущих релизах. Проектам, которые жестко привязывают этот хук к основной бизнес-логике, может потребоваться внести коррективы при обновлении Next.js. Разумным подходом будет обернуть хук в небольшую внутреннюю утилиту, которую можно будет легко заменить, если API изменится.

За чем следить дальше

Next.js намекал на более широкую поддержку офлайн-режима в будущих релизах, возможно, путем интеграции стратегий кэширования непосредственно во фреймворк. Следите за описанием релизов (release notes), чтобы не пропустить переход из статуса «experimental» в «stable», а также появление новых API, которые дополнят useOffline автоматическим сохранением данных.

Итог: useOffline дает разработчикам быстрый способ обнаружить потерю связи и адаптировать интерфейс, но это лишь первый шаг. Для создания надежного офлайн-опыта по-прежнему требуются явные механизмы кэширования и синхронизации, а экспериментальный статус хука означает, что командам следует изолировать его использование, чтобы избежать головной боли при будущем рефакторинге.