StorybookでSWCを有効にして快適な開発を行う

Storybook7.6からSWCサポートの改善が行わられ、いくつかのwebpackを用いたフレームワークを用いた環境では、Babelで動く部分をSWCを用いてStorybookを起動できるようになりました。
react-webpack5、next、vue-webpack5などが対象です。

これによってStorybookの起動までの時間が50%ほど削減されます。
また、Nextjsはバージョン11ごろからBabelではなくSWCを使うようになっています。StorybookがSWCで動くようになることでよりNextjs側の動作に近い動作をします(このサポートはNext14以降で行われます)。

導入はmain.ts、main.mjsを触るだけで済みます。

export default {
  framework: {
    name: '@storybook/nextjs',
    options: { builder: { useSWC: true } }
  }
};

frameworkのoptions.builderでuseSWRをtrueに設定するだけです。
簡単に有効化できるので、ぜひ一度試してみてはいかがでしょうか。