Server Component에서 Css-in-JS 라이브러리 사용하기 (feat. panda-css)

next.js의 app router가 stable되면서 app 폴더 내부에 생성된 컴포넌트는 기본적으로 server component로 설정되었다.

chakra ui를 사용하던 중에 이 문제를 격하게 실감하게 되었다.

RSC를 지원하지 않기 때문에 모든 컴포넌트에 "use clinet"를 사용해야 했고, 이렇게 되면 RSC를 사용하지 못하게 되는 단점이 있었다.

이에 대해서 chakra ui 깃허브 이슈를 살펴보던 중, 서버 컴포넌트를 지원하는 새로운 라이브러리르 만들었다는 제작자의 코멘트를 보았다.

 

그것이 바로 panda css였다.

https://panda-css.com/

Panda CSS - Build modern websites using build time and type-safe CSS-in-JS

 

그렇다면, 바로 Get Started로 시작해보기로 하였다. (Next.js app router 환경에서 사용해보았다)

 

1. Panda CSS 설치하기

npm install -D @pandacss/dev
npx panda init --postcss

panda init을 통해서 자동으로 pandacss 관련 설정들이 생성된다.

 

2. package.json에 스트립트 추가하기

{
  ...
  "scripts": {
    "prepare": "panda codegen",
    ...
  }
}

그리고 npm run prepare를 실행하면, /styled-system/css에 panda css가 생성된다.

 

3. React 컴포넌트들이 포함될 수 있도록 panda.config.ts를 수정한다.

import { defineConfig } from "@pandacss/dev"

export default defineConfig({
    ...
    include: [
      // 초기 설정
      "./src/**/*.{js,jsx,ts,tsx}", 
      "./pages/**/*.{js,jsx,ts,tsx}",
      
      // app router를 위해서 추가한 설정
      "./src/components/**/*.{ts,tsx,js,jsx}", 
      "./src/app/**/*.{ts,tsx,js,jsx}"
      
      // src 폴더를 사용하는지 꼭 확인하자.
      "./components/**/*.{ts,tsx,js,jsx}",
      "./app/**/*.{ts,tsx,js,jsx}",
    ],
    ...
})

 

4. /app/globals.css 에 다음 코드를 추가한다.

@layer reset, base, tokens, recipes, utilities;

만약 next.js 프로젝트 생성 시 tailwindcss를 사용했다면, 상단에 tailwindcss 설정이 남아있을 것이다.

그렇다면, tailwindcss 설정은 주석처리를 해주자.

 

5. /src/app/layout.tsx에 globals.css를 불러오자

import "./globals.css";

 

모든 설정이 끝났다! 이제 panda css를 사용할 수 있다.

 

기본적인 사용법은 다음과 같다.

import Link from "next/link";
import { css } from "@/styled-system/css";

export default function Home() {
  return (
    <main
      className={css({
        fontSize: "2xl",
        fontWeight: "bold",
        color: "#3cdef3",
      })}
    >
      <div>
        <h1>Home</h1>
        <Link href={"/about"}>About</Link>
      </div>
    </main>
  );
}

 

🐼 그렇지만, 적용이 안될 경우?

 

next 빌드 파일 삭제 후 다시 실행해보자.

{
  "scripts": {
    "dev": "rm -rf .next && next dev",
    ...
  },
  ...
}

 

혹은, postcss.config.js를 확인해보자.

module.exports = {
  plugins: {
    // tailwindcss: {},
    // autoprefixer: {},
    "@pandacss/dev/postcss": {},
  },
};

pandacss 설정이 제대로 있는지 확인하고, 다른 설정은 주석처리 하자.

 

그리고, panda css를 사용하기 위해서는 빌드 target을 es6 이상으로 설정하자.

 

✦ 사용후기

개인적으로는 pandacss의 설정이 tailwindcss의 설정보다 좀 더 복잡했다.

사용하기에도 tailwindcss는 직접 클래스에 이름을 주면 되기에 더 편했다. (css 메서드 불필요)

물론, pandacss는 zero runtime이라는 장점을 지닌다. (마치 vanilla-extract 처럼)

다만, 무엇보다도 next.js 프로젝트 생성 옵션에서 tailwindcss를 사용할 것인지 묻는만큼, next.js에 더 잘 호환되는 라이브러리는 tailwindcss가 아닌가 하는 생각을 하였다.

 

그래서 아직까지는 app router를 사용할 때 tailwindcss가 좀 더 DX에 좋은 선택지이지 않나 싶다.