Comment utiliser le localStorage avec Next.js
18/01/2025 • Melvynx
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.
Le localStoarge
est généralement utilisé pour stocker par exemple :
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.
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>;
}
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.
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.