[NextJS] Next.js 프로젝트에서 CSS 프레임 워크 결정 하기

 

 

Next.js를 사용하여 프로젝트를 진행하기로 하였다. 현재 상황과 Next.js의 호환성을 고려하여 css Framework를 선정하고 있다.

 

 

---

 

 

 

1. 현재 상황

 

디자이너가 없다. 능력 있는 디자이너와 함께 협업을 했더라면 tailwind css 하나만 사용해도 괜찮았을 것 같다. 하지만 모달, 사이드 바 등등 컴포넌트들을 직접 만들어야 하는 상황이 있어서 컴포넌트를 제공해주는 무언가가 필요하다.

 

 

 

 

2. Next.js 의 호환성

 

이번 프로젝트에서는 UI가 큰 비중을 차지 하지는 않아서 최대한 Next.js의 장점을 살려서 서버 사이드를 최대한 활용 하려고 한다.

 

 

일단 클라이언트 사이드에서 많이들 사용하는 CSS-In-JS..! 예쁜 UI 컴포넌트들을 많이 제공해주지만...

Next.js의 서버 컴포넌트는 CSS-In-JS와는 호환성이 떨어진다. 아래 글에 정리를 해두었다.

 

2024.03.21 - [Next.js] - [Next.js] Next.js와 호환되는 css와 그렇지 못한 css에 대한 고찰

[Next.js] Next.js와 호환되는 css와 그렇지 못한 css에 대한 고찰

 

 

 

일단 tailwind css를 사용하기로 했다.

팀원들이 tailwind css에 대한 사용 경험도 있으며, Next.js도 tailwind css와의 높은 호환성을 제공한다.

 

 

공식 문서 내용

Tailwind CSS is a utility-first CSS framework that works exceptionally well with Next.js.

 

 

 

어쨌든 Tailwind Css를 가져가기로 했고, 앞서 말했듯이 컴포넌트가 필요했다. 그래서 Tailwind Css 기반 컴포넌트 라이브러리들을 찾아보았다. 

 

 

 

1) Flowbite ( 결정 )

Flowbite - Tailwind CSS component library
Get started with the most popular open-source library of interactive UI components built with the utility classes from Tailwind CSS

 

Flowbite는 tailwind css 기반이기 때문에 호환이 괜찮다.

그리고 다른 라이브러리들에 비해 UI들을 그나마 다양하게 제공 해줘서 결정하게 되었다. 그래도 부족하지만..

 

참고로 next.js에서 이 라이브러리를 사용하려면 flowbite-react와 함께 사용하여야 한다!

 

 

2) daisy UI

 

The most popular component library for Tailwind CSS

 

daisy UI는 호환성이 정말 좋다. 처음에는 호환성 때문에 사용하려 했으나 제공하는 컴포넌트가 너무 적었다.

그리고 컴포넌트가 너무 심플해서 많은 커스텀을 필요하기 때문에 사용을 안하기로 마음 먹었다.

 

 

3) Next UI

 

이건 tailwind css 기반은 아니었지만 그냥 이름부터 뭔가 Next.js와 호환 될 것 같아서 사용하려고 해봤다.

 

App Directory Setup
Next.js 13 introduces a new app/ directory structure. 
By default it uses Server Components. 
As NextUI components use React hooks, we added the use client; at build time, 
so you can import them directly in your React Server Components (RSC).

 

 

하지만 공식 문서에서 리액트 훅을 사용하기 때문에 서버 컴포넌트와 호환성이 떨어진다고 한다.

그래서 클라이언트 컴포넌트로 전환 시켜야 사용이 가능하다고 한다.

 

왜 이름은 Next UI 일까..

 

 

 

---

 

 

 

결론은 Tailwind Css와 flowbite ( + flowbite-react )를 함께 사용하기로 마음 먹었다.

이유는 호환성, 그리고 다양한 컴포넌트의 필요성 때문이라고 요약할 수 있겠다.

 

 

 

더 좋은 라이브러리가 있다면 댓글로 남겨 주시면 너무 감사할 것 같습니다!