Il tuo carrello è attualmente vuoto!
Cannot read properties of null reading useContext, solo su refresh: il caso del provider Next.js fuori posto
Un altro articolo della categoria too technical, didn’t read. Come sempre, è un promemoria per me stesso: documentare problemi e soluzioni affrontati sul campo.
Se sei capitato qui per sbaglio e non mastichi React o Next.js, dai un’occhiata alle altre sezioni del sito per contenuti decisamente più accessibili 😉
Recentemente mi è capitato un caso curioso mentre sviluppavo un’app Next.js: accedendo alla home e navigando verso le pagine di dettaglio dei contenuti, tutto funzionava alla perfezione. Ma, accedendo direttamente al contenuto (es. tramite URL diretto o refresh), ottenevo questo errore:
TypeError: Cannot read properties of null (reading 'useContext')Ci ho messo un po’ a capire il perché, e voglio raccontarti cosa ho scoperto e come risolverlo una volta per tutte.
Indice dei contenuti
Il problema
Questo errore avviene quando un componente usa useContext() su un context React, ma il relativo provider non è ancora stato montato.
Esempio:
const { user } = useContext(UserContext); // 💥 Errore se UserContext è nullQuesto accade solo in accesso diretto o reload perché Next.js ricostruisce l’intero albero dei componenti da zero.
Se il tuo provider (es. <UserContext.Provider>) non è nel layout globale ma solo dentro pagine specifiche o strutturato in modo errato, non viene incluso nel rendering iniziale.
Perché funziona nella navigazione interna?
Quando navighi tra pagine con next/link o router.push, lo stato del client viene mantenuto, inclusi provider React già montati. Quindi:
- Funziona nella navigazione da home
- Crasha su accesso diretto o refresh, se il provider non è nella struttura globale
Il problema più comune: provider fuori da <body>
Nel mio caso specifico, pensavo di aver fatto tutto correttamente perché avevo inserito il mio GlobalContextProvider nel layout dell’app. Ma guardando meglio, mi sono accorto che lo avevo messo fuori dal tag <body>, così:
<GlobalContextProvider>
<body>
...
</body>
</GlobalContextProvider> // 🔥 FUORI da <body>, quindi ignoratoNext.js richiede che tutti i componenti React (inclusi i context provider) siano figli di <body>, non fratelli o genitori.
La soluzione definitiva
Avvolgi tutto dentro il Provider dentro il body:
<html>
<body>
<GlobalContextProvider>
<div className="wrapper">
<AppHeader appConfig={appConfig} />
<AppBody>
{children}
</AppBody>
<AppFooter />
</div>
</GlobalContextProvider>
</body>
</html>Conclusione
L’errore useContext(null) è un classico problema da architettura React mal posizionata in Next.js. La chiave è includere sempre i provider nel layout globale, assicurandosi che siano all’interno del <body>.
Una volta sistemato, il tuo context sarà disponibile in modo affidabile sia nella navigazione interna che sugli accessi diretti o refresh.
Se ti stai chiedendo quale hosting utilizzo, la risposta è VHosting! Lo scelgo da anni perché è veloce, stabile e ha un ottimo supporto. Ho anche un’affiliazione attiva: se acquisti tramite il mio link, io guadagno qualcosa, ma tu non paghi un centesimo in più. Win-win! 😉
no admin