Next.js Discord

Discord Forum

Why was my Next.js stackoverflow question downvoted?

Answered
Siamese posted this in #help-forum
Open in Discord
SiameseOP
can someone please explain if I missing something obvious?

https://stackoverflow.com/questions/78219574/next-js-how-to-use-localstorage-during-intial-render
Answered by Ray
I don't know why your question got downvoted but I can solve your issue.
localStorage is a browser api and not available on server on the first render
export default function useDarkSide() {
  const [theme, setTheme] = useState('light')

  useEffect(() => {
    const theme = localStorage.getItem("theme")
    if (theme) setTheme(theme)
  }, [])
  ...
}

but the page will go from light to dark theme if the user selected dark theme and refresh the page.
so I would suggest you using next-themes which handle all the thing it need for you
View full answer

13 Replies

@Siamese can someone please explain if I missing something obvious? https://stackoverflow.com/questions/78219574/next-js-how-to-use-localstorage-during-intial-render
Ray
I don't know why your question got downvoted but I can solve your issue.
localStorage is a browser api and not available on server on the first render
export default function useDarkSide() {
  const [theme, setTheme] = useState('light')

  useEffect(() => {
    const theme = localStorage.getItem("theme")
    if (theme) setTheme(theme)
  }, [])
  ...
}

but the page will go from light to dark theme if the user selected dark theme and refresh the page.
so I would suggest you using next-themes which handle all the thing it need for you
Answer
SiameseOP
thanks, i already tried this and it works, but the first client side render renders and displays the page with light theme and then switches to dark which does not look very good (blinks)

the code i posted makes the first client side render dark, but crashes server side rendering...
Ray
yes use next-themes
SiameseOP
or should i just give up and accept that it will blink on reload?
Ray
next-themes does not rely on your theme styling using CSS variables. You can hard-code the values in your CSS, and everything will work as expected (without any flashing)
SiameseOP
but the only way to know what css to apply is to read the localStorage (with theme key being either light or dark), how does next-themes get around this problem?
Ray
it get the theme from localStorage then update the dom
you could see their source code how they do it
SiameseOP
i will have a look, thanks for the tip
SiameseOP
ok, I had a look, they solve this on client side by going around react and directly manupaliting DOM and do some trickery to prevent mismatch between server and client render, I do not like this, I think I found the solution - I will use cookies
@Siamese can someone please explain if I missing something obvious? https://stackoverflow.com/questions/78219574/next-js-how-to-use-localstorage-during-intial-render
joulev
Your question is fine. SO is just toxic – the dudes at the comment section don’t even know what they are talking about, their answers are completely off the target
SiameseOP
fyi, i got it working using cookies and SRR, which means there is no flicker or rerender on client 🙂