[Next.js] next-themes로 다크모드

마운트 상태 확인의 중요성

다크모드를 추가하고 나니 에러 발생

Uncaught Error: Minified React error #418; visit https://react.dev/errors/418 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

기존코드

"use client";

import { Moon, Sun } from "lucide-react";
import { useTheme } from "next-themes";

const DarkMode = () => {
  const { theme, setTheme } = useTheme();

  return (
    <button
      onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
      className="rounded px-4 py-2"
    >
      {theme === "dark" ? <Sun /> : <Moon />}
    </button>
  );
};

export default DarkMode;

하지만, 초기 렌더링 시 theme 값이 아직 제대로 설정되지 않거나, 서버와 클라이언트 간의 불일치로 인해 에러가 발생

원인

Next-themes는 브라우저에서 사용자의 설정이나 OS 테마에 따라 다크모드를 결정하는데 초기기 랜더링할 때는 theme가 설정되지 않을 수 있음.

해결 방법: 마운트 상태 확인

변경코드

"use client";

import { Moon, Sun } from "lucide-react";
import { useTheme } from "next-themes";
import { useEffect, useState } from "react";

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

  useEffect(() => {
    setMounted(true);
  }, []);

  if (!mounted) return null;

  return (
    <button
      onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
      className="rounded px-4 py-2"
    >
      {theme === "dark" ? <Sun /> : <Moon />}
    </button>
  );
};

export default DarkMode;

초기에 useState로 mounted를 false로 주고 나서 useEffect로 렌더링이 되면 true로 바꿔줘서 해결