📖 들어가며 Next.js 14버전 app router 프로젝트의 styled-comoponents에서 vanilla-extarct로 마이그레이션을 진행함에 있어서 다크모드 기능도 같이 진행하게 되었습니다. 그리고 이번 다크모드를 적용하면서 next-themes를 활용해 봤는 데 사용 경험이 매우 좋았습니다. 또한, app router에서 vanilla-extract로 다크모드를 구현함에 있어서 참고자료가 많지 않다는 것을 깨달았기 때문에 글을 작성하려 합니다. 그럼 이제 Next.js app router에서 vanilla-extract + next-themes를 활용한 다크모드를 한번 구현해 봅시다. 🧐 next-themes 소개 https://github.com/pacocoursey/next-them..

📖 들어가며 기존 프로젝트에서 Next.js 14버전의 앱 라우터에서 styled-components를 사용하고 있었습니다. 이전에 Next.js 11버전에서 14버전으로 마이그레이션을 진행하면서 남아있던 부분이었습니다. 앱 라우터에서 서버 컴포넌트를 지원하기 시작하면서, 서버 컴포넌트 활용 해보고자 마이그레이션을 진행했습니다. 그럼 먼저 왜 마이그레이션을 진행했고, 왜 vanilla-extract를 선택했는지 간략히 설명해 볼게요. 🔍 앱 라우터(app router)에서 styled-components의 문제점 styled-components는 서버 컴포넌트를 지원하지 않기 때문에, styled-components를 사용하려면 'use client'를 명시함으로써 클라이언트 컴포넌트를 강제적으로 사용해..