Nextjs 13에서 stylex 사용하기 / stylex란?

 

보통 CSS-in-JS는 서버컴포넌트에서는 지원이 안돼서 style component를 사용하기 위해 babel을 사용하는 방법이 있는데, NextJS 13부터 app router 구조로 바꾸면서 기존 방법이 불가능해졌다. 

("use client"를 선언하고 사용하면 가능하지만, css를 위해 서버컴포넌트를 포기하고싶지는 않았다.)

 

그래서 무작정 globals.css에 모든 css를 작성했다.

(module.css는 개발자모드와 css를 비교하면서 오류잡기가 힘들어서 사용하지 않았다.)

하지만 모든걸 global.css 파일에 작성하다 보니 수정하고 관리하는게 너무 힘들었다.

 

stylex 란?

nextjs 13 + 서버컴포넌트에서도 사용 가능한 CSS-in-JS 를 찾아보다가 stylex를 알게돼었다.

stylex는 페이스북이 23년 12월에 릴리즈한 css-in -js 라이브러리다.

StyleX의 주요 특징중 하나는 컴파일러 기반 라이브러리 입니다. 기존 CSS-in-JS 라이브러리 였던 styled-components나 emotion 은 런타임에 브라우저에 스타일(CSS)를 주입하여, 추가적인 자원 사용과 처리 시간이 발생하여 성능에 영향을 주는 단점이 있었는데요.

StyleX는 런타임이 아닌, 컴파일 시에 CSS 파일로 변환되기 때문에, 전통적인 CSS에 가까운 성능을 제공합니다.

또한 StyleX의 특징중 하나는 원자 CSS(Atomic CSS) 방식인데요. 원자 CSS를 사용하여 CSS출력을 최소화하고, 컴포넌트 수가 증가하고 프로젝트의 크기가 커지더라도 CSS 크기가 일정하게 유지 된다고 합니다.

따라서 StyleX는 스타일의 관리와 성능 최적화 면에서 전통적인 CSS의 장점을 유지하면서도, CSS-in-JS의 특징인 유연성과 확장성을 제공합니다.

출처 : https://careerly.co.kr/library/styledcomponents

 

 

stylex 설치 

공식문서 참고

https://stylexjs.com/docs/learn/installation/

Installation | StyleX

1. stylex 패키지 설치 

npm install --save @stylexjs/stylex

 

2. babel plugin 설정

babel.config.js 파일로 설정하거나 .babelrc.js 파일로 설정하는 방법이 있는데, 둘 중 하나 선택해 설정하면 된다.

나는 .babelrc.js파일로 설정했다. 

1) 플러그인을 설치한 후

npm install --save-dev @stylexjs/nextjs-plugin

2) .babelrc.js 를 작성한다.

root폴더에 파일을 생성해 작성하면 된다.

.babelrc.js
//.babelrc.js

const path = require('path');
module.exports = {
  presets: ['next/babel'],
  plugins: [
    [
      '@stylexjs/babel-plugin',
      {
        dev: process.env.NODE_ENV === 'development',
        runtimeInjection: false,
        genConditionalClasses: true,
        treeshakeCompensation: true,
        aliases: {
          '@/*': [path.join(__dirname, '*')],
        },
        unstable_moduleResolution: {
          type: 'commonJS',
          rootDir: __dirname,
        },
      },
    ],
  ],
};

3) 마지막으로 next.config.js 에 해당 설정을 추가한다.

//next.config.js

const path = require('path');
const stylexPlugin = require('@stylexjs/nextjs-plugin');

module.exports = stylexPlugin({
  aliases: {
    '@/*': [path.join(__dirname, '*')],
  },
  rootDir: __dirname,
})({});

나는 기본적으로 nextConfig가 이미 작상됐었기 때문에 아래처럼 작성했다.

const path = require('path');
const stylexPlugin = require('@stylexjs/nextjs-plugin');

/** @type {import('next').NextConfig} */
const nextConfig = {
    reactStrictMode: false, // console이 두번찍히지 않게 하기 위함! true로 설정할 경우 개발모드에서 자손까지 검사해서 console이 두번 찍히게됨.
}

module.exports = stylexPlugin({
  aliases: {
    '@/*': [path.join(__dirname, '*')],
  },
  rootDir: __dirname,
})(nextConfig);

 

stylex 사용하기

stylex 사용 예시이다. 

import * as stylex from '@stylexjs/stylex'; 
//@stylexjs/stylex 모듈에서 모든 내보내기(default exports를 포함하여)를 stylex라는 이름의 네임스페이스로 가져오는 것


export default function Home() {
  
  return (
    <>
      <h2 {...stylex.props(styles.myColor)}>Hello!</h2>
      this is My Next Web Home root.
    </>
  )
}

const styles = stylex.create({
  myColor: {
    color: 'red',
  },
});

 

이렇게 하면 Hello!라는 글씨가 빨간색이 된 것을 볼 수 있다.