Language/Next.js

[Next 13] Next js + Tailwind 다크모드(Darkmode)

소개

오늘날 디지털 시대에는 사용자 경험이 가장 중요합니다. 사용자 경험을 향상시키는 한 가지 방법은 웹사이트나 애플리케이션에 다크 모드 기능을 제공하는 것입니다. 다크 모드를 구현하면 프로젝트에 정교함이 추가될 뿐만 아니라 특히 저조도 환경에서 눈이 편해집니다. 이 기사에서는 웹 개발에 널리 사용되는 두 가지 도구인 Tailwind CSS와 Next.js를 사용하여 다크 모드를 구현하는 방법을 살펴보겠습니다.

전제 조건

구현을 시작하기 전에 다음 전제 조건이 충족되었는지 확인하세요.

HTML, CSS, JavaScript에 대한 기본 지식.
시스템에 Node.js 및 npm이 설치되어 있습니다.
작동 중인 Next.js 프로젝트.

예제 Next.js 13 폴더 구조

- src (If selected during installation)
  - app
    - components
      - DarkMode.tsx
      - providers.tsx
    - globals.css
    - layout.tsx (will be .jsx if TS is not selected)
    - page.tsx

Tailwind CSS 설정

설치

시작하려면 Next.js 프로젝트에서 Tailwind CSS를 설정해야 합니다. 다음 명령을 실행하여 Tailwind CSS를 설치합니다.

npm install tailwindcss
npm i next-themes
npm i react-icons

구성

다음으로, 프로젝트 루트에 tailwind.config.js 파일을 생성하여 Tailwind CSS를 구성합니다. 이 파일을 사용하면 다크 모드의 디자인을 사용자 정의할 수 있습니다.

다크 모드 활성화

이제 HTML 템플릿에 클래스를 추가하여 어두운 모드를 활성화해 보겠습니다. Tailwind CSS에서 제공하는 dark 클래스를 사용하여 밝은 모드와 어두운 모드 간에 전환할 수 있습니다.

다크 모드 구현

다크 모드 버튼 만들기

애플리케이션에 버튼을 추가하여 밝은 모드와 어두운 모드 사이를 전환할 수 있는 옵션을 사용자에게 제공할 수 있습니다.

"use client"
import { useState, useEffect } from 'react'
import { useTheme } from 'next-themes'
import { FaMoon, FaSun } from 'react-icons/fa'

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

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

  if (!mounted) {
    return null
  }

  return (
    <button className='absolute right-4 bottom-4' onClick={e => theme === 'dark' ? setTheme('light') : setTheme('dark')}>
        {theme === 'dark' ? <FaMoon /> : <FaSun />}
    </button>
  )
}

export default DarkModeButton

공급자 설정

이 코드를 'provider.tsx'에 복사하세요.

provider.tsx
'use client'

import { ThemeProvider } from 'next-themes'

export function Providers({ children } : {children: React.ReactNode}) {
  return <ThemeProvider>{children}</ThemeProvider>
}

'layout.tsx'의 랩 공급자

import type { Metadata } from 'next'
import './globals.css'
import { Providers } from './components/providers'

export const metadata: Metadata = {
  title: 'Template',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body>
        {/* Wrapping the children prop */}
        <Providers>{children}</Providers> 
      </body>
    </html>
  )
}

다크모드 버튼 구현

import DarkModeButton from "./components/DarkMode";

export default function Home() {
  return (
    <>
      <h1 className="text-4xl w-full bg-blue-700 p-3 flex justify-center">
        Template
      </h1>
      <DarkModeButton />
    </>
  )
}

테스트

수동 테스트

애플리케이션을 배포하기 전에 수동 테스트를 수행하여 다크 모드 기능이 올바르게 작동하는지 확인하는 것이 중요합니다.

자동화된 테스트

어두운 모드 구현과 관련된 잠재적인 문제를 파악하려면 자동화된 테스트를 설정하는 것이 좋습니다.

최적화

CSS 축소

애플리케이션을 최적화하려면 CSS 파일을 축소하여 로딩 시간을 줄이세요.

지연 로딩

이미지 및 기타 자산에 대한 지연 로딩을 구현하여 다크 모드 지원 웹사이트의 성능을 향상하세요.

결론

Tailwind CSS 및 Next.js를 사용하여 다크 모드를 구현하는 것은 사용자 경험을 향상하고 웹 사이트를 더욱 다양하게 만드는 환상적인 방법입니다. 이 문서에 설명된 단계를 따르면 세련되고 기능적인 다크 모드를 프로젝트에 추가할 수 있습니다.

출처 : https://blog.stackademic.com/dark-mode-in-next-js-13-aab566d20baa

자주 묻는 질문(FAQ)

Q1: 모든 웹 프로젝트에서 다크 모드를 구현할 수 있나요?

예, HTML 및 CSS를 제어할 수 있는 한 대부분의 웹 프로젝트에서 다크 모드를 구현할 수 있습니다.

Q2: 다크모드는 미적인 측면에서만 사용되는 건가요, 아니면 실용적인 장점이 있는 건가요?

다크 모드는 세련되게 보일 뿐만 아니라 눈의 피로를 줄이고 OLED 화면이 있는 장치의 배터리 수명을 절약할 수 있습니다.

Q3: Tailwind CSS 및 Next.js 외에 다크 모드 구현을 위한 도구가 있나요?

다른 도구와 프레임워크도 있지만 Tailwind CSS와 Next.js는 간단하고 효율적인 솔루션을 제공합니다.

Q4: 다크 모드의 색 구성표를 사용자 정의할 수 있나요?

전적으로! Tailwind CSS를 사용하면 광범위한 사용자 정의가 가능합니다.

저작자표시 비영리 변경금지

'Language > Next.js' 카테고리의 다른 글

[Next.js] 구글 애널리틱스 스크립트 : 페이지 라우터 vs 앱 라우터 (0)	2024.01.05
[Next.js] 13 버전 앱 라우터 국제화(i18n) (0)	2023.11.27
[Next.js] SVG 아이콘 사용하기(@svgr/webpack) (1)	2023.10.29
[Next.js] Alias (별칭) - 파일 경로나 모듈 경로 (2)	2023.10.29
[Next.js] 새로운 탭(창) 여는 법 - Version 13 (1)	2023.10.27

Contents

새소식

인기 검색어