Next.jsにstyled-componentsを取り込む方法【Babelの設定が必要】

Reactを使ってサーバーサイドレンダリングのフレームワークを使う場合、真っ先に出てくるのがNext.jsではないでしょうか？ Next.jsを使うことでとても簡単にサーバーレンダリングのアプリを作ることができます。 そして、Reactでスタイリングをする際に使われる方法がCSS in JS。これを導入することでコンポーネント毎にCSSを記述できるのでReactの考えとマッチして保守性が高くなります。 そんなCSS in JSを使う際の第一候補となるライブラリーがstyled-componentsです。最も人気のCSS in JSライブラリーでしょう。 この2つを使ってアプリを作ることが多いと思うのでNext.jsにstyled-componentsを導入する方法について解説していきます。 Next.jsでstyled-componentsを使う4ステップ 1.Next.jsのプロジェクト