Next.js로 포트폴리오 만들기 2 - 다크모드 개선기 (Extra attributes from the server: data-theme,style 에러 해결, 서버에서 클라이언트 정보를 아는 법)

Extra attributes from the server 에러다크모드를 추가해둔 사이트에서  Extra attributes from the server: data-theme,style 에러가 발생했다서버에서 렌더링된 html 파일과 다른 data-theme, style 속성이 있어 발생하는 에러다 suppressHydrationWarning ...suppressHydrationWarning으로 hydration mismatch로 발생하는 에러를 무시하도록 설정할 수 있지만, 다른 원인으로 hydration mismatch가 일어났을 때도 경고를 무시할 수 있으므로 다른 방법을 찾아보고싶었다 enableColorScheme {children}ThemeProvider에서 enableColorScheme..

• format_list_bulleted 개인 프로젝트/포트폴리오
• · 2025. 3. 10.
• textsms

Next.js로 포트폴리오 만들기 1 - next-themes로 다크모드 구현하기

포트폴리오 사이트를 만들기 시작했다지금까지는 기획상 애니메이션 등 보여지는 요소들을 많이 구현해보지 못했는데 포트폴리오는 보여지는게 목적이다보니 궁금했던 모션이나 상호작용 등을 활용해보려한다 첫번째로 다크모드를 처음 시도해보려한다 next-themesNext.js에서 다크모드를 비롯한 테마 변경을 쉽게 구현할 수 있도록 하는 라이브러리클라이언트 측에서 localStorage 또는 class 속성을 사용해 테마를 적용하고 유지하도록 한다 주요 기능 및 이점- useTheme() 훅을 사용해 테마를 간편하게 변경할 수 있음- 사용자가 선택한 테마를 localStorage로 유지- class 기반 테마를 지원해 tailwindCSS를 활용할 때 유용- system 옵션을 사용해 사용자의 OS 테마 설정에 따라..

• format_list_bulleted 개인 프로젝트/포트폴리오
• · 2025. 3. 4.
• textsms