はじめに こんにちは! 犬専用の音楽アプリ オトとりっぷでエンジニアしています、足立です! この記事では、Next.jsのReact Server Components(RSC) で使用可能なゼロランタイムCSS in JSライブラリを比較します。 目次 モチベーション 使えるライブラリたち 選定基準 選定結果 比較結果 書き味 パフォーマンス Dynamic Styling 結論 モチベーション みなさん、Next.jsのReact Server ComponentsのStyleをどうやるか問題に悩んでおられますね? 私もどれを使えばいいのかわからずNext.js公式に見に行くと、App Routerで使用できるものとして、以下のライブラリを上げています。 が、React Server Componentsではnot supportedと記載されており、まだまだ未整備な状況のようです。
![App Router時代のゼロランタイムCSS in JSに何を使えばいいの?](https://cdn-ak-scissors.b.st-hatena.com/image/square/710fd2c5083d6225d03e1e66c49f1733d562498e/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--kgKFiOE_--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3AApp%252520Router%2525E6%252599%252582%2525E4%2525BB%2525A3%2525E3%252581%2525AE%2525E3%252582%2525BC%2525E3%252583%2525AD%2525E3%252583%2525A9%2525E3%252583%2525B3%2525E3%252582%2525BF%2525E3%252582%2525A4%2525E3%252583%2525A0CSS%252520in%252520JS%2525E3%252581%2525AB%2525E4%2525BD%252595%2525E3%252582%252592%2525E4%2525BD%2525BF%2525E3%252581%252588%2525E3%252581%2525B0%2525E3%252581%252584%2525E3%252581%252584%2525E3%252581%2525AE%2525EF%2525BC%25259F%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3A%2525E3%252580%252590%2525E5%252585%2525AC%2525E5%2525BC%25258F%2525E3%252580%252591%2525E3%252582%2525AA%2525E3%252583%252588%2525E3%252581%2525A8%2525E3%252582%25258A%2525E3%252581%2525A3%2525E3%252581%2525B7%252520-%252520%2525E7%25258A%2525AC%2525E5%2525B0%252582%2525E7%252594%2525A8%2525E3%252581%2525AE%2525E9%25259F%2525B3...%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyL2Y3NGU5ZTJkYjAuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)