Next.js 16.3 では、ブラウザのネットワーク接続が切断された瞬間にコンポーネントが反応できる実験的な useOffline フックが導入されました。const isOffline = useOffline() を呼び出すだけで、リクエストの失敗を待つことなく、UIを即座に切り替えることができます（例：メインアプリの代わりに「オフラインです」という表示を出すなど）。
なぜ今、このフックが重要なのか
開発者は長らくブラウザの online/offline イベントに頼ってきましたが、これらのイベントは低レベルであり、手動での実装が必要でした。Next.js の新しいフックは、そのボイラープレートを一行に抽象化し、フレームワークの React ファーストなパラダイムにきれいに適合させています。即座に得られるメリットは、よりスムーズなユーザー体験です。ライブ API が必要なボタンを無効化したり、フォームの送信をブロックしたり、接続が失われた瞬間に親切な通知を表示したりできます。これにより、フェッチが失敗した後に初めて表面化するようなサイレントエラーを防ぐことができます。
ページへの追加方法
import { useOffline } from 'next/navigation';
export default function Home() {
const isOffline = useOffline();
return isOffline ? (
<p>You are offline</p>
) : (
<App />
);
}
このフックはリアルタイムで更新されるブール値を返すため、条件付きレンダリングやエフェクトを即座に反応させることができます。next/navigation パッケージに含まれているため、クライアントサイドでレンダリングされるページと、クライアントでハイドレーションされるサーバーコンポーネントの両方で動作します。
考慮すべき制限事項
このフックは、サイトをオフラインファーストのアプリに変えるものではありません。単に接続ステータスを報告するだけです。ネットワークが切断された状態でもコンテンツを使用可能にするには、引き続き以下の対応が必要です。
- Next.js 内蔵のアセット最適化機能またはサービスワーカーを使用して、静的アセットをキャッシュする。
- 動的データを IndexedDB やその他のクライアントサイドのストアに保存する。
- フォーム送信のためのバックグラウンド同期やリトライロジックを実装する。
これらの要素がなければ、UI でユーザーにオフラインであることを知らせることはできても、アプリは新しいデータを読み込むことができません。
実験的なAPIを使用する際のリスク
useOffline は実験的（experimental）としてフラグが立てられているため、将来のリリースでシグネチャや挙動が変更される可能性があります。このフックをコアなビジネスロジックに深く組み込んでいるプロジェクトは、Next.js のアップデート時に調整が必要になるかもしれません。賢明なアプローチは、API が進化した場合に差し替えができるよう、内部ユーティリティを介してフックをラップしておくことです。
今後の注目点
Next.js は、今後のリリースでより広範なオフラインサポートを示唆しており、キャッシング戦略をフレームワークに直接統合する可能性があります。「実験的」から「安定版（stable）」への移行や、useOffline を補完する自動データ永続化機能を持つ新しい API に注目してください。
まとめ: useOffline は、接続の喪失を検出し UI を最適化するための迅速な手段を開発者に提供しますが、これはあくまで第一歩に過ぎません。強固なオフライン体験を実現するには、依然として明示的なキャッシングと同期メカニズムが必要であり、またフックが実験的なステータスであるため、将来的なリファクタリングの手間を避けるためにその使用箇所を分離しておくべきです。