🚀 Revolvendo o problema de hydratação com nextJs 14 🚀

Olá desenvolvedores!!!

O problema:

Atualmente passei por esse problema, o famoso "hydration for rendering" com o nextJs14

A solução:

Utilizando o hook useEffect só roda no cliente, então agora podemos mostrar a UI com segurança para o usuário, dessa forma como segue no código abaixo:

'use client'

import { useState, useEffect } from 'react'
import { useTheme } from 'next-themes'

const ThemeSwitch = () => {
  const [mounted, setMounted] = useState(false)
  const { theme, setTheme } = useTheme()

  // useEffect only runs on the client, so now we can safely show the UI
  useEffect(() => {
    setMounted(true)
  }, [])

  if (!mounted) {
    return null
  }

  return (
    <select value={theme} onChange={(e) => setTheme(e.target.value)}>
      <option value="system">System</option>
      <option value="dark">Dark</option>
      <option value="light">Light</option>
    </select>
  )
}

export default ThemeSwitch