Next>styling 할때

스타일링할때 가능한 방법들은 다음과 같을 거 같다. 

 

- styled-component 를 사용

- scss 를 사용( css 보다는 편하니까 그냥 scss 사용, next 는 기본셋팅 되어있음 )

- tailwindcss 를 사용

- antd 를 사용( bootstrap 보다는 세련되어 보임, 색상, ui 애니메이션등 )

 

이것저것 건드려본 결과 ( 오랜 시간을 테스트 해 본것은 아님 )

특정 ui에 대한 디자인이 없다면

antd, styled-component 를 사용하면 될거 같다. 

 

tailwind는 util로서 사용하기는 용이할 수도 있으나 css 를 사용할 줄 아는 상태에서는( 나 같은 경우 )  

사용하기가 더 번거로웠다.

- 초반에는 해당 클래스네임을 참고하면서 하는것

- 다른 라이브러리와 스타일이 겹칠시 오버라이드 하기 귀찮은 점.

Next.js에서 제공하는 셋팅예제

antd

github.com/vercel/next.js/tree/canary/examples/with-ant-design

vercel/next.js

tailwindcss

github.com/vercel/next.js/tree/canary/examples/with-tailwindcss

 

vercel/next.js

 

다시 작업을 하다가 효율적인 방향이 생긴다면 글을 업데이트 하자.