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のプロジェクトの作成

まずは、Next.jsのプロジェクトを作成します。
npx create-next-app
yarn create next-app

2.styled-componentsのインストール

次に、styled-componentsの導入を行います。
npm install --save styled-components
yarn add styled-components

3.indexページの書きかえ

page/index.jsを書き換えてstyled-comonetnsが上手く動くのかを確認。以下のソースに書き換えます。

page/index

import styled from 'styled-components'

export default function Home() {
  // Create a Title component that'll render an <h1> tag with some styles
  const Title = styled.h1`
    font-size: 1.5em;
    text-align: center;
    color: palevioletred;
  `;

  // Create a Wrapper component that'll render a <section> tag with some styles
  const Wrapper = styled.section`
    padding: 4em;
    background: papayawhip;
  `;

  // Use Title and Wrapper like any other React component – except they're styled!
  return (
    <Wrapper>
      <Title>
        Hello World!
      </Title>
    </Wrapper>
  );
}

4.babelのプラグインの設定

4ステップ目がbabelのプラグインの設定です。これによりサーバーサイドでもstyled-componentsが働くようにしていきます。

npm install --save-dev babel-plugin-styled-components
yarn add -D babel-plugin-styled-components

そして、作業フォルダーのルート(package.jsonと同じ階層)に以下のファイルを作成します。

.babelrc

{
    "presets": [
      "next/babel"
    ],
    "plugins": [
      [
        "babel-plugin-styled-components",
        {
          "ssr": true,
          "displayName": true,
        }
      ]
    ]
  }

これにより、サーバーレンダリングでstyled-styled-componentsを利用できるようになります。

Balelの設定について

1～3までは既存のライブラリーを取り込むときと同じですが、4番目のbabelの設定が特殊ですよね。なのでここからはなぜbebelの設定が必要なのかについて解説してきます。

styled-componentsがサーバーレンダリングに対応していない

ステップ3までの状態でサーバーを立ち上げて、http://localhost:3000にアクセスするとエラーもしくはスタイルが効いていない状態で表示されます。

なぜこのようなことが起きるのかというと、Next.jsとstyled-componentsが実行される前提とする環境が異なるためです。

styled-componentは元々クライアント側で動くことを前提としています。そのため、サーバーサイドでプレレンダリングを行いHTMLを作っているNext.jsを動かそうとするとスタイルが上手く効かないのです。

babelとは？

ここで出てきたbabelとはJavaScriptのコンパイラのことです。日々更新されるJavasciprtの文法を現在の環境で動くように変換しています。

具体的には、

• es2015以降の新しい構文をes5の構文への変換
• ReactのJSX
• TypeScriptからJavascriptへの変換

これらの処理を行っています。

.babelrcとは？

そして、Babelがどのように変換を行うのかを設定するファイルが.babelrc。作業フォルダーのルートにJSON形式で追記していきます。

今回設定したpresetsパラメータはBabelが変換処理を行う際に利用するプラグインのコレクションになります。この情報を基にコンパイルに必要なプラグインを渡します。

ちなみに、Next.jsを取り込んだ時点ではReactアプリケーションとサーバーサイドコーディングに必要なプリセットnext/babelは含まれています。Next.jsの公式サイトに明記されていますが、機能を拡張したいときに以下の形式で記述するのです。

Next.jsでbabelの設定を拡張するときのフォーマット

{
  "presets": ["next/babel"],
  "plugins": []
}

今回の場合は.babelrcにstyled-componentsのプラグインを追加し、サーバーサイドで実行できるよう設定しています。

まとめ

• Nextはサーバーレンダリング、styled-componentsはクラインとでの実行を前提としているので2つをインストールしただけではうまく動かない
• サーバーサイドでstyled-componentsを使うにはjavascriptのコンパイラーであるBabelを使う

参考

styled-components: Tooling

webpackとBabelの基本を理解する(2) ―Babel編― - Qiita

Advanced Features: Customizing Babel Config | Next.js

Next.js + Styled Components The Really Simple Guide ▲ + 💅