Next.js에서 shadcn 사용하기

shadcn

공식 문서 링크는 다음과 같다. 디테일한 건 공식 문서를 참고하자.

https://ui.shadcn.com/docs/installation/next

Next.js

---

shadcn이란

리액트 ui 컴포넌트 라이브러리인 React MUI를 알 것이다. next.js에도 비슷한 게 있다. 그게 shadcn이다

https://ui.shadcn.com/

Build your component library - shadcn/ui

쉽게 말해서, UI를 만들기 쉽게 하는 라이브러리이다. 여러 UI를 지원해 준다. 버튼도 있고, 사이드바도 있고... 엄청 많다.

next.js를 쓸 거면 꼭 알아두는 것을 추천한다!

---

Next.js
Install and configure shadcn/ui for Next.js.

프로젝트에 설치하기

명령어 >

npx shadcn@latest init

이후 내가 원하는 "컴포넌트"를 별도로 가져올려면 추가로 npx 설치가 필요하다. 예를 들어 버튼 컴포넌트를 가져올 것이라면..

명령어 >

npx shadcn@latest add button

이후 컴포넌트를 다음 코드처럼 써주면 된다.

import { Button } from "@/components/ui/button"

export default function Home() {
  return (
    <div>
      <Button>Click me</Button>
    </div>
  )
}

import를 해주고 컴포넌트처럼 써주면 끝. 

더 많은 컴포넌트 예시

더 많은 UI 컴포넌트 예시가 궁금하면 다음 링크를 참고하자.

https://ui.shadcn.com/docs/components

Accordion