useOffline

Core Idea

Experimental hook that returns a boolean for whether the app is currently offline, letting you render connectivity-aware UI like a banner or an offline-aware loading fallback. Requires the experimental.useOffline config flag; without it always returns false.

Key Concepts

• useOffline(): Client hook returning boolean (no parameters).
• experimental.useOffline: next.config flag that enables offline detection and automatic retry of blocked navigation, prefetch, and Server Action requests.
• Status: Experimental, not recommended for production.

Code Examples

module.exports = {
  experimental: { useOffline: true },
}

'use client'
import { useOffline } from 'next/offline'

export function OfflineBanner() {
  const isOffline = useOffline()
  if (!isOffline) return null
  return <div role="status" className="offline-banner">You are offline. Some content may be unavailable.</div>
}

• O que demonstra: Banner persistente renderizado no root layout, visível em toda rota quando a conectividade cai.

Reference Tables

Value	Meaning
true	Offline. Um request falhou, ou o browser disparou evento offline.
false	Online, ou renderizando no servidor. Também é o valor inicial antes da hidratação.

Key Takeaways

1. Importe de next/offline, não next/navigation.
2. Útil dentro de loading.tsx para explicar por que o conteúdo dinâmico está demorando enquanto offline.
3. Quando a conexão volta, o Next.js reexecuta automaticamente o request bloqueado e o conteúdo dinâmico chega via streaming.
4. Sem o flag experimental habilitado, o hook é um no-op (sempre false).

Connects To

• experimental.useOffline (next.config): config que precisa estar ligado para o hook funcionar de fato.
• loading.js: local natural para exibir feedback offline-aware.