Next.js로 포트폴리오 만들기

Installation

참고 사이트

  1. 다크모드 라이브러리를 설치해준다.

npm install next-themes

  1. package-lock.json 에 추가되었는지 확인해준다.

  2. dark 모드 기능을 구현하는 컴포넌트를 만들고 코드를 작성해준다.

import { useTheme } from "next-themes";
import { useState } from "react";

export default function DarkModeBtn() {
  const { theme, setTheme } = useTheme();
  const [isDarkMode, setIsDarkMode] = useState<boolean>(true);

  function handleModeBtn() {
    setIsDarkMode(!isDarkMode);
    isDarkMode ? setTheme("light") : setTheme("dark");
  }

  return (
    <div>
      <button onClick={handleModeBtn}>Mode Change</button>
    </div>
  );
}
  • useTheme을 import해서 사용해주면 되는데, 나는 useState를 추가로 구현하여 return 코드를 간결하게 만들어주었다.

결과물

image image