O Next.js 16.3 traz um hook experimental useOffline que permite que um componente reaja no momento em que o navegador perde a conexão de rede. Ao chamar const isOffline = useOffline(), você pode alternar a UI instantaneamente – por exemplo, renderizar “Você está offline” em vez do aplicativo principal – sem esperar que uma requisição falhe.

Por que o hook é importante agora

Os desenvolvedores há muito dependem dos eventos online/offline do navegador, mas esses eventos são de baixo nível e exigem uma configuração manual. O novo hook do Next.js abstrai o boilerplate em uma única linha, encaixando-se perfeitamente no paradigma "React-first" do framework. O benefício imediato é uma experiência de usuário mais fluida: botões que precisam de uma API ativa podem ser desativados, formulários podem ser bloqueados e um aviso amigável pode aparecer no segundo em que a conectividade for perdida. Isso evita erros silenciosos que, de outra forma, só apareceriam após uma falha no fetch.

Como adicioná-lo a uma página

import { useOffline } from 'next/navigation';

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

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

O hook retorna um booleano que é atualizado em tempo real, de modo que qualquer renderização condicional ou efeito possa reagir instantaneamente. Como ele reside no pacote next/navigation, funciona tanto em páginas renderizadas no lado do cliente quanto em server-components que realizam a hidratação no cliente.

Limites para os quais você precisa se planejar

O hook não transforma um site em um aplicativo "offline-first". Ele apenas reporta o status da conectividade. Para manter o conteúdo utilizável quando a rede cair, você ainda precisa:

  • Fazer o cache de assets estáticos com o otimizador de assets integrado do Next.js ou um service worker.
  • Armazenar dados dinâmicos no IndexedDB ou em outro armazenamento no lado do cliente.
  • Implementar sincronização em segundo plano ou lógica de tentativa de reenvio (retry) para envios de formulários.

Sem esses elementos, a UI pode informar ao usuário que ele está offline, mas o aplicativo ainda será incapaz de carregar novos dados.

Riscos de usar uma API experimental

Como o useOffline é marcado como experimental, sua assinatura ou comportamento pode mudar em uma versão futura. Projetos que vinculam o hook à lógica de negócio principal podem precisar de ajustes quando o Next.js for atualizado. Uma abordagem prudente é envolver o hook em uma utilidade interna que possa ser substituída caso a API evolua.

O que observar a seguir

O Next.js deu pistas de um suporte offline mais amplo em lançamentos futuros, possivelmente integrando estratégias de cache diretamente no framework. Fique de olho nas notas de lançamento para qualquer mudança de “experimental” para estável, e para novas APIs que complementem o useOffline com persistência de dados automática.

Resumo: O useOffline oferece aos desenvolvedores uma maneira rápida de detectar a perda de conectividade e adaptar a UI, mas este é apenas o primeiro passo. Experiências offline robustas ainda exigem mecanismos explícitos de cache e sincronização, e o status experimental do hook significa que as equipes devem isolar seu uso para evitar dores de cabeça com refatoração no futuro.