Next.js 16.3 发布了一个实验性的 useOffline Hook，它能让组件在浏览器断开网络连接的瞬间做出响应。通过调用 const isOffline = useOffline()，你可以立即切换 UI —— 例如，直接渲染“您已离线”而不是主应用 —— 而无需等待请求失败。

为什么该 Hook 现在意义重大

开发者长期以来一直依赖浏览器的 online/offline 事件，但这些事件属于底层 API，需要手动编写逻辑。Next.js 的新 Hook 将这些样板代码抽象为单行代码，完美契合了该框架以 React 为核心的范式。其直接益处是提供更流畅的用户体验：需要实时 API 的按钮可以被禁用，表单可以被拦截，并且在连接丢失的一瞬间就能显示友好的提示。这可以防止那些只有在 fetch 失败后才会显现的静默错误。

如何在页面中添加它

import { useOffline } from 'next/navigation';

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

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

该 Hook 返回一个实时更新的布尔值，因此任何条件渲染或 Effect 都可以立即做出响应。因为它位于 next/navigation 包中，所以它既适用于客户端渲染的页面，也适用于在客户端进行注水的服务端组件 (Server Components)。

你需要考虑的局限性

该 Hook 并不会将网站变成一个“离线优先”的应用。它仅仅是报告连接状态。为了在网络断开时保持内容可用，你仍然需要：

  • 使用内置的 Next.js 资源优化器或 Service Worker 缓存静态资源。
  • 将动态数据存储在 IndexedDB 或其他客户端存储中。
  • 为表单提交实现后台同步或重试逻辑。

如果没有这些环节，UI 虽然可以告知用户已离线，但应用仍然无法加载新数据。

使用实验性 API 的风险

由于 useOffline 被标记为实验性，其函数签名或行为可能会在未来的版本中发生变化。如果项目将该 Hook 锁定在核心业务逻辑中，那么在 Next.js 更新时可能需要进行调整。一个谨慎的做法是将该 Hook 封装在一个内部工具函数之后，以便在 API 演进时进行替换。

后续关注点

Next.js 已暗示在未来的版本中会提供更广泛的离线支持，可能会将缓存策略直接集成到框架中。请密切关注发行说明，留意它是否从“实验性”转为“稳定”，以及是否会出现能通过自动数据持久化来补充 useOffline 的新 API。

总结： useOffline 为开发者提供了一种快速检测连接丢失并定制 UI 的方法，但这仅仅是第一步。健壮的离线体验仍需要明确的缓存和同步机制，且由于该 Hook 处于实验阶段，团队应将其使用范围进行隔离，以避免未来重构带来的麻烦。