ふとwebアプリ作ったろって思い立ったのでNext.jsにlinariaの設定して動かしたら、まあなんとも面倒くさそうなエラーが発生。

Using the "css" tag in runtime is not supported. Make sure you have set up the Babel plugin correctly.

あれ？nextで使えなかったっけ？(以前使えるみたいな記事見かけた気が…)
Babelの設定いじればなんとかなるもんなんですかね。

なにはともあれ僕の環境まわり

nodeはnodenvを使用。
nextjsは npx create-next-app@latest で設定。

結論は最初に言う

代替案あったので諦めた！(ごめん)

これで終わったらなんの記録にもならないしつまらないので備忘録的なことを書き連ねる↓

まずは思考放棄でエラー内容でググってそれっぽい記事を総当たり。
5～6件ググって当てはまりそうな感じの見当たらなかったのでlinariaのsetupの項目をひたすら見る。

ふむふむ。わからん。
babelの設定うんたらの話が出るのかと思いきや見当たんない。

ってかエラー内容的にnext側のエラーっぽいし、nextのドキュメントに書いてあんじゃねって見たらすぐ見つかった。

The following libraries are supported in Client Components in the app directory (alphabetical):

訳: 次のライブラリは、appディレクトリ内のクライアントコンポーネントでサポートされています。

chakra-ui
kuma-ui
@mui/material
pandacss
styled-jsx
styled-components
style9
tamagui
tss-react
vanilla-extract

なるほど、appディレクトリ使ったルーティングでは一部のcss-in-jsしかサポートしてないのね。
やっぱ公式がいっちゃんわかりやすいって事。
さくっと諦め、、、ん？

CSSの拡張モジュール！？

あぁ、なんか最初っから入ってたpage.module.cssとかってやつか。
完全にスルーしてた。

なかなかいいじゃん。
ちょっと使ってみた感じ使い勝手も申し分ない。
なにより外部のライブラリ使わなくていいってのは楽。

今は完全に趣味で作っているだけなので一旦はこのまま進めるってことで諦めた。(特にjsから変数渡すとか無いと思う…多分)

入れる方法あったら入れようかなとそれくらいのモチベーション。
ちなみに今作っているアプリの話とかは後日やる。

まずはドキュメント読もう！