EmotionをNext.js x TypeScriptの環境にインストールする手順

Emotionは比較的最近できたCSS in JSライブラリです。後発ということもあり多機能で使い勝手がよいと評判です。
今回はNext.js with TypeScriptの環境にEmotionをインストールする手順について紹介します。

開発環境

パッケージのインストール

EmotionおよびEmotionのbabelプラグインをインストールします。

$ yarn add @emotion/react
$ yarn add --dev @emotion/babel-plugin

.babelrcの作成

Babelの設定ファイルである.babelrcを作成します。

.babelrc

{
  "presets": [
    [
      "next/babel",
      {
        "preset-react": {
          "runtime": "automatic",
          "importSource": "@emotion/react"
        }
      }
    ]
  ],
  "plugins": ["@emotion/babel-plugin"]
}

tsconfig.jsonの編集

tsconfig.jsonに以下を追加します。

tsconfig.json

{
  "compilerOptions": {
+   "types": ["@emotion/react/types/css-prop"],
  },
  ...
  ...
}

動作確認

src/pages/index.tsx

import type { NextPage } from "next";
import { css } from '@emotion/react'

const Home: NextPage = () => {
  return (
    <h1 css={helloStyle}>Hello</h1>
  );
};

const helloStyle = css({
  color: 'red'
});

// 以下のような書き方でもOK
// const helloStyle = css`
//   color: red;
// `

export default Home;

アプリケーション再起動後、以下のようにCSSが反映されていればOKです。

さいごに

Twitter(@nishina555)やってます。フォローしてもらえるとうれしいです！

参考記事

• 【Next.js & TypeScript】Emotionの導入が大変だったので手順をまとめておく