Next.jsではないプロジェクトでlinariaがうまくいったので、Next.jsの別のプロジェクトにも導入しようと考えた
↓Next.jsではないプロジェクトで導入した話 uga-box.hatenablog.com
ただ、単純にライブラリを使えば良いというのではなく更新されていないライブラリに手を加える必要があり、npm run devで表示させるところまでは一応うまくいったが、本番で動かすにはもう少し調査してからにする
linariaのインストール方法はドキュメント通り
npm install @linaria/core @linaria/react @linaria/babel-preset
次に、linariaで生成したCSSをNext.jsで解決するためのライブラリ next-linaria をインストールしたいのだが、問題点としてこれが３年前から更新されておらず、linariaの最新のwebpack-loader と next-linariaの期待する webpack-loader がマッチせず動かない
具体的には現在 linaria@v6 のドキュメントに書かれている linaria のweback-loader は以下の@wyw-in-js/webpack-loaderを使用することになっているが、
next-linariaでは linaria/loaderを使用する設定になっているのでうまくいかない
next-linaria/index.js at master · Mistereo/next-linaria · GitHub
↑のライブラリの実装を見ると、単純にcss-loaderを使ってCSSを解決しているだけなので、自分で該当箇所を修正して実装してみたところ動いたのは動いたが、何か特定のケースでうまくいかなかった時に全てを戻すのは怖いのでもう少し調査してからにする
参考
NextJS で linaria を動かすために知っておくと良いこと | blog.ojisan.io
