Comment utiliser le localStorage avec Next.js

Le localStorage est un moyen de stocker des données sur le navigateur de l'utiliateur, comme indiqué dans le nom il est "local". Mais avec Next.js, qui est un framework Backend pour React, il est compliqué de l'utiliser.

Dans cette article je vais t'expliquer clairement comment utiliser le localStorage avec Next.js et éviter les erreurs courantes liées au rendu côté serveur.

Pourquoi utiliser le localStorage avec Next.js ?

Le localStoarge est généralement utilisé pour stocker par exemple :

• des préférences de l'utilisateur
• des données de l'utilisateur si il est offline pour pouvoir les récupérer plus tard
• des paramètres ou autre

Le truc c'est que le localStorage est accessible via l'object window.localStorage et window est disponiblemebt uniquement sur le navigateur, c'est à dire côté client.

Ou on peut utiliser le localStorage ?

Le localStorage est uniquement disponible dans les Client Components de Next.js.

C'est à dire que par défaut, tu ne peux pas utiliser le localStorage dans tes pages si tu n'as pas opt-in pour devenir un Client Component.

Voici un exemple de code qui ne fonctionne pas :

export default function Home() {
  const [state, setState] = useState(() => window.localStorage.getItem('state'));

  return <div>{state}</div>;
}

Par défaut, les copmosnats en Next.js sont des Server Components et ne peuvent ni avoir de useState ni interragir avec window. Ce qu'il faudrait faire c'est de le transformer en Client Component.

Pour ce faire, il faut ajouter use client en haut de ton composant :

'use client';

export default function Home() {
  const [state] = useState(() => window.localStorage.getItem('state'));

  return <div>{state}</div>;
}

Maintneant ce code va fonctrionner, mais attention, les clients component sont toujours rendu en SSR il n'est donc pas possible de faire ceci :

export default function Home() {
  const data = window.localStorage.getItem('state');

  return <div>{data}</div>;
}

Custom hook pour le localStorage

Le mieux est de créer un custom hook pour le localStorage qu'on va généralement useLocalStorage et qui va nous permettre de s'assurer qu'on ne fait pas d'erreur d'utilisation pour l'hydration. Voici l'exemple simplifié de react-use :

import { useState, useEffect, useCallback } from 'react';

const useLocalStorage = (key, initialValue) => {
  const [state, setState] = useState(() => {
    try {
      const item = localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch {
      return initialValue;
    }
  });

  useEffect(() => {
    try {
      if (state !== undefined) {
        localStorage.setItem(key, JSON.stringify(state));
      } else {
        localStorage.removeItem(key);
      }
    } catch {
      // Silently fail (private mode, etc.)
    }
  }, [key, state]);

  const setValue = useCallback((value) => {
    setState(value);
  }, []);

  const remove = useCallback(() => {
    try {
      localStorage.removeItem(key);
      setState(undefined);
    } catch {
      // Fail silently
    }
  }, [key]);

  return [state, setValue, remove];
};

export default useLocalStorage;

Je t'invite à installer la libriarie react-use pour directement utiliser leur hooks, ils ont de nombreux hooks très utiles en général.

Conclsuion

Le localStorage ne peut que être utilisé dans des clinets component, mais il faut faire attention à les utiliser dasn des callback ou dans des useEffect pour éviter des probème d'hydration.

Si tu veux suivre une formation sur Next.js ou en apprendre plus sur mes autres articles NextJS je t'invite à aller en voir plus.

Tu te demande aussi peux être si il faut choiisr entre NextJS ou React ou comment fonctionne les server actions en NextJS.