[Next.js] Emotion SWCを有効にする方法

2 min read

概要

Next.js v12.1.1-canary.12 で Emotion の SWC 対応が入った(v12.1.1 から正式に入るだろう)。

https://github.com/vercel/next.js/pull/34687

方法

  1. Babel の設定ファイル(babel.config.jsなど)を削除
    ※ Emotion 以外の設定がある場合は削除してしまうと問題
  2. @emotion/babel-pluginをアンインストール
  3. ドキュメントの設定をnext.config.jsに追加する
// next.config.js

module.exports = {
  experimental: {
    emotion: boolean | {
      // デフォルトはtrue。ビルドタイプがproductionの場合は無効となります。
      sourceMap?: boolean,
      // デフォルトは'dev-only'.
      autoLabel?: 'never' | 'dev-only' | 'always',
      // デフォルトは'[local]'.
      // 許容値: `[local]` `[filename]` and `[dirname]`
      // このオプションは、autoLabel が 'dev-only' または 'always' に設定されているときのみ機能します。
      // 生成されるラベルの形式を定義でます。
      // フォーマットは文字列で定義され、変数部分は角括弧 [] で囲まれる。
      // 例)labelFormat: "my-classname--[local]", ここで[local]は結果が代入される変数の名前に置き換えられる。
      labelFormat?: string,
    },
  },
}

Only importMap in @emotion/babel-plugin is not supported for now.

importMapは未対応とのこと。

その他

自環境では問題なかったが、コードによっては上手く動かないケースもあるみたいなので、正式リリース時には解消されていることを願う。

https://github.com/vercel/next.js/issues/30804#issuecomment-1073910073

avatar

hiro

Web Frontend Engineer / ex: Web Backend Engineer, Application Engineer