YT Music Clone Coding With NextJS 14

install

# 1 nextjs 프로젝트 시작하기
npx create-next-app@14.1.0

# 2. 필요한 패키지 미리 설치
( version issue에 대응하여 특정 버전으로 설치하기 )   
yarn add react-spinners@^0.13.8
yarn add react-icons@^5.0.1
yarn add tailwind-merge@^2.2.1
yarn add zustand@^4.5.0

# 3. install shadcn
- 설치법 : https://ui.shadcn.com/docs/installation/next
- https://ui.shadcn.com/docs/components/carousel 등 사용 가능 

npx shadcn-ui@latest init
✔ Which style would you like to use? › Default
✔ Which color would you like to use as base color? › Slate
✔ Would you like to use CSS variables for colors? … no / yes

- tailwind.config.ts > content 부분에 js,ts,jsx,tsx,mdx 라고 해야지 jsx에도 tailwind css 가 적용된다.


# 4. darkmod
- https://ui.shadcn.com/docs/dark-mode/next

yarn add next-themes
- 다크모드 provider 제공  
- .dark 클래스에 다크 모드 관련 색상이 정의 된다.

git branch check point

*ch-1-done 라는 이름으로 브랜치가 있습니다.

ch1-done    
ch2-done    
ch3-done    
ch4-done    
ch5-done    
ch6-done    
ch7-done    
ch8-done    
ch9-done    
ch10-done   
ch11-done   
ch12-done