Next.js 14에서 StyleX를 써보았다

Next.js 14에서 StyleX를 사용하게 되면 babel 컴파일러가 강제됩니다. 그에 따른 여러가지 이슈를 정리했습니다.

작성일 2024.02.16

페이지가 생성된 시간 2024.10.01 21:01:06

Next.js에서 StyleX 사용하기

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

.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,
        },
      },
    ],
  ],
};

next.config.js

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

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

주의

Next.js 프로젝트에서 .babelrc.js 파일을 생성하면 컴파일러가 babel로 변경된다. 관련 공식문서

babel로 컴파일러가 변경되면서 생기는 이슈

1. client component에서 server action import 불가능

[swc 컴파일러 사용시] client component에서 server action을 import해서 사용하는 예시(출처. Next.js 공식문서)

'use client'
 
import { publishPost, saveDraft } from './actions'
 
export default function EditPost() {
  return (
    <form action={publishPost}>
      <textarea
        name="content"
        onChange={async (e) => {
          await saveDraft(e.target.value)
        }}
      />
      <button type="submit">Publish</button>
    </form>
  )
}

위 코드는 babel 컴파일러 사용시 다음과 같은 오류를 발생시킨다. 관련 깃허브 이슈

Server actions must be async functions

어쩔 수 없이 props로 넘기는 방식이 강제된다.

'use client'
 
export default function ClientComponent({ updateItem }) {
  return <form action={updateItem}>{/* ... */}</form>
}

2. .next build 캐시 오류

next dev 또는 next build 명령어 실행 시 .next 폴더가 만들어지며 이곳에 빌드 캐시가 저장이 된다.

stylex를 사용한 css코드들의 빌드가 제대로 되지 않는 문제가 발생한다.

package.json을 변경해 .next 캐시를 지우도록 설정하여 해결하였다. (빌드시간 오래 걸리게 되는건 어쩔 수 없는것 같다..)

  "scripts": {
    "dev": "rm -rf .next && next dev",
    "preview": "rm -rf .next && next build && next start",
    "build": "rm -rf .next && next build",
    "start": "next start",
    "lint": "next lint"
  },

3. next/font 사용 불가능

babel 컴파일러를 사용하면 next/font를 사용할 수 없다... 관련 공식문서

느낀점

1. 모듈 css 스타일
2. css 재사용이 편하다
3. dynamic한 스타일도 사용하기 편하다
4. 스타일 재정의도 편리하게 사용할 수 있다
5. Next.js에서 사용할 때 babel 컴파일러가 강제되며 그에 따른 이슈가 존재한다