Next.js 프로젝트 (5) - Ant Design 이용해보기

검색해 본 결과 토이프로젝트로.. 디자인하고 마크업 쪽에 시간을 덜 뺏길 원한다면 Ant Design이라는 훌륭한... 대륙의 실수로 만들어진 사이트가 있었다..

공식사이트 확인

 

보면.. Layout 부터 네비게이터, 버튼은 물론이고 Grid, icon, Form, Modal, Drawer 등 바로 쓸 수 있도록 지원해주고 있었다.

 

1. Ant Design 설치

$ yarn add antd

끝..

공식 사이트 보면 사용 예제도 있어서 쉽게 사용할 수 있다...

 

Next 프로젝트에서 스타일을 적용하려면 앱이 최초로 실행되는 부분인 pages/_app.js  부분에 아래와같이 css를 선언해 줘야 스타일이 먹힌다.

import "antd/dist/antd.css";

 

추가로 아이콘 관련 컴포넌트를 쓰려면, 

$yarn add @ant-design/icons