Next.js 16.3 introduit un hook expérimental useOffline qui permet à un composant de réagir dès l'instant où le navigateur perd sa connexion réseau. En appelant const isOffline = useOffline(), vous pouvez instantanément basculer l'interface utilisateur – par exemple, afficher « Vous êtes hors ligne » au lieu de l'application principale – sans attendre l'échec d'une requête.

Pourquoi ce hook est important maintenant

Les développeurs s'appuient depuis longtemps sur les événements online/offline du navigateur, mais ces événements sont de bas niveau et nécessitent une configuration manuelle. Le nouveau hook de Next.js abstrait ce code répétitif en une seule ligne, s'insérant parfaitement dans le paradigme de Next.js axé sur React. Le bénéfice immédiat est une expérience utilisateur plus fluide : les boutons nécessitant une API en direct peuvent être désactivés, les formulaires peuvent être bloqués, et un message d'avertissement peut apparaître dès la perte de connectivité. Cela évite les erreurs silencieuses qui ne se manifesteraient autrement qu'après l'échec d'un fetch.

Comment l'ajouter à une page

import { useOffline } from 'next/navigation';

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

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

Le hook renvoie un booléen qui se met à jour en temps réel, de sorte que tout rendu conditionnel ou effet peut réagir instantanément. Comme il se trouve dans le package next/navigation, il fonctionne aussi bien sur les pages rendues côté client que sur les server components qui s'hydratent côté client.

Limites à anticiper

Le hook ne transforme pas un site en une application offline-first. Il se contente de signaler l'état de la connectivité. Pour que le contenu reste utilisable lorsque le réseau est absent, vous devez toujours :

  • Mettre en cache les ressources statiques avec l'optimiseur d'assets intégré de Next.js ou un service worker.
  • Stocker les données dynamiques dans IndexedDB ou un autre magasin côté client.
  • Implémenter une synchronisation en arrière-plan ou une logique de retry pour l'envoi des formulaires.

Sans ces éléments, l'interface peut informer l'utilisateur qu'il est hors ligne, mais l'application sera toujours incapable de charger de nouvelles données.

Risques liés à l'utilisation d'une API expérimentale

Comme useOffline est marqué comme expérimental, sa signature ou son comportement pourrait changer dans une version future. Les projets qui intègrent le hook au cœur de leur logique métier pourraient devoir s'adapter lors des mises à jour de Next.js. Une approche prudente consiste à encapsuler le hook derrière une utilité interne qui pourra être remplacée si l'API évolue.

À surveiller ensuite

Next.js a laissé entendre qu'un support hors ligne plus étendu serait disponible dans les prochaines versions, intégrant potentiellement des stratégies de mise en cache directement dans le framework. Surveillez les notes de version pour tout passage du statut « expérimental » à « stable », ainsi que pour de nouvelles API qui complèteraient useOffline avec une persistance automatique des données.

À retenir : useOffline offre aux développeurs un moyen rapide de détecter la perte de connectivité et d'adapter l'interface utilisateur, mais ce n'est que la première étape. Des expériences hors ligne robustes nécessitent toujours des mécanismes explicites de mise en cache et de synchronisation, et le statut expérimental du hook signifie que les équipes devraient isoler son utilisation pour éviter de futurs casse-têtes de refactorisation.