๐ ๋ค์ด๊ฐ๋ฉฐ 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'๋ฅผ ๋ช ์ํจ์ผ๋ก์จ ํด๋ผ์ด์ธํธ ์ปดํฌ๋ํธ๋ฅผ ๊ฐ์ ์ ์ผ๋ก ์ฌ์ฉํด..