다크 모드 - Next.js

Next.js 앱에 다크 모드를 추가하는 방법을 단계별로 알려드릴게요. 여기서는 테마 상태를 서버와 클라이언트가 공유할 수 있게 도와주는 next-themes 라이브러리를 사용해요. 이렇게 하면 SSR 환경에서도 초기 렌더링 시점의 테마를 안전하게 결정할 수 있어요.

출처: 문서

본문

Next.js에서 다크 모드를 설정하는 흐름을 따라가 볼게요.

next-themes 설치하기

먼저 next-themes를 설치해요.

npm install next-themes

테마 프로바이더 만들기

next-themes의 ThemeProvider를 그대로 감싸는 커스텀 프로바이더를 만들어요. 이렇게 한 번 감싸두면 나중에 기본 설정을 추가하거나 로직을 확장하기 편리해요.

"use client"

import * as React from "react"
import { ThemeProvider as NextThemesProvider } from "next-themes"

export function ThemeProvider({
  children,
  ...props
}: React.ComponentProps<typeof NextThemesProvider>) {
  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
}

루트 레이아웃 감싸기

만든 ThemeProvider를 루트 레이아웃에 추가해요. defaultTheme="system"과 enableSystem을 지정하면 사용자 시스템의 다크 모드 설정을 기본값으로 따르게 돼요. suppressHydrationWarning은 서버와 클라이언트가 그리는 html 속성이 다를 때 생기는 경고를 억제하는 역할을 해요.

import { ThemeProvider } from "@/components/theme-provider"

export default function RootLayout({ children }: RootLayoutProps) {
  return (
    <>
      <html lang="en" suppressHydrationWarning>
        <head />
        <body>
          <ThemeProvider
            attribute="class"
            defaultTheme="system"
            enableSystem
            disableTransitionOnChange
          >
            {children}
          </ThemeProvider>
        </body>
      </html>
    </>
  )
}

모드 토글 추가하기

이제 사이트에 모드 토글을 배치해서 라이트 모드와 다크 모드를 오갈 수 있게 해요.

더 알아보기

다크 모드 전체 개요: 다크 모드 문서를 참고해요.
다른 프레임워크별 설정: Astro, Vite, Remix 문서를 확인해요.