【2021年3月更新】Next.js に Zero-runtime CSS in JS の linaria を導入する

2020年に公開した記事の内容に、一部deprecatedなライブラリの利用が含まれていましたので更新しました(2021年3月24日)。 また、随時更新を可能にするためにリポジトリを公開しました。ソースを読めば分かる方はこちらをどうぞ！ linaria とは Next.js については React の Web アプリケーション向けフレームワークということで知名度が高いと思いますが、 linaria についてはまだ知名度が比較的低いかもしれません。 特筆すべき特徴として、Write CSS in JS, but with zero runtime, CSS is extracted to CSS files during buildが挙げられており、CSS in JS の形式で実装できるものの、Webpack にてビルドした後は独立した CSS ファイルとして書き出されるとのことです。 また