Next.js
Next.js
Next.js 프로젝트에 shadcn/ui를 설치하고 구성하는 방법을 알려드릴게요. init 명령어 하나로 새 프로젝트를 만들거나 기존 프로젝트에 설정을 적용할 수 있어요.
출처: 문서
본문
Next.js 15를 사용하고 있다면 Next.js 15 + React 19 가이드를 확인해 주세요.
프로젝트 만들기
init 명령어를 실행해 새 Next.js 프로젝트를 만들거나 기존 프로젝트를 설정해요.
npx shadcn@latest init
기본값을 그대로 쓰고 싶다면 -d 플래그를 사용할 수 있어요. 이 경우 new-york, zinc, CSS 변수에 yes가 적용됩니다.
npx shadcn@latest init -d
components.json 구성
components.json을 구성하기 위해 몇 가지 질문을 받게 돼요.
Which style would you like to use? › New York
Which color would you like to use as base color? › Zinc
Do you want to use CSS variables for colors? › no / yes
끝!
이제 프로젝트에 컴포넌트를 추가할 수 있어요.
npx shadcn@latest add button
위 명령어가 프로젝트에 Button 컴포넌트를 추가해 줘요. 그런 다음 이렇게 import 하면 됩니다.
import { Button } from "@/components/ui/button"
export default function Home() {
return (
<div>
<Button>Click me</Button>
</div>
)
}