imdb clone Part6 5 Add a darkMode 4/○ hydration Errorを修正

概要

目次

今回はhydration errorが出ているので改善を行います。

hydration errorとは最初のレンダリングにおいて、SSR or ISRとCLRが一致してないことによるエラーのようです。（詳細は参考の部分参照）

改善前

改善後　hydarion Errorが無くなっていることを確認できます。

開発環境

OS:Windows10
IDE:VSCode

"@next/font": "13.1.5",
"autoprefixer": "10.4.14",
"eslint": "8.39.0",
"eslint-config-next": "13.3.1",
"next": "13.3.1",
"postcss": "8.4.23",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-icons": "^4.8.0",
"tailwindcss": "3.3.2"

実装のポイント

react-themeのドキュメントに回避方法があるのでそれを参考にします。

コード部分

Layout

Layout.jsx

"use client";
import {useEffect, useState } from 'react'
import {MdLightMode} from "react-icons/md";
import {BsFillMoonFill} from "react-icons/bs"
import {useTheme} from "next-themes";


export default function DarkModeSwitch() {
    const{systemTheme,theme,setTheme} = useTheme();
+    const [mounted,setMounted] = useState(false);

+    useEffect(() => setMounted(true),[]);
    
    const currentTheme = theme === "system" ? systemTheme : theme;
    
    return (
    <>  
+        {mounted && ( currentTheme === "dark" ? (
            <MdLightMode 
                onClick={() => setTheme("light")}/>) : (
        <BsFillMoonFill onClick={() => setTheme("dark")}/>))}
    </>
  )
}

参考

Hydration Error

react-theme

その他

Udemy

githubコミット分