【React・Next.js】emotion/react のセットアップ

<!-- =========================================================== -->
# 概要
<!-- =========================================================== -->
CRA（Create React App）で作成した**Reactプロジェクト**と、**Next.jsプロジェクト**それぞれに対して、**emotion/react**の導入方法をまとめました。

どちらもゴールは、.tsxファイルに以下のプラグマを書かなくて済む設定にすることです。

`/** @jsx jsx */`
`/** @jsxImportSource @emotion/react */`

:::note info
<strong>emotion</strong>は、CSS in JS記法で書くスタイリングパッケージです。
:::

https://emotion.sh/docs/introduction

<!-- =========================================================== -->
# CRA（Create React App）への導入
<!-- =========================================================== -->
以下の記事の抜粋になっています。
パッケージについて詳しく知りたい方は、こちらも併せて参照してください。

https://qiita.com/xrxoxcxox/items/17e0762d8e69c1ef208f

### プロジェクト作成
適当なプロジェクトフォルダを作成して、以下を実行します。

```shell
npx create-react-app . --template typescript --use-npm
```

### パッケージインストール
以下をインストールします。

```shell
npm i @emotion/react
npm i -D @emotion/babel-plugin
npm i @craco/craco
```

https://emotion.sh/docs/@emotion/babel-plugin

https://github.com/gsoft-inc/craco

### tsconfig.json
設定を追加します。

```tsconfig.json
"compilerOptions": {
	"jsxImportSource": "@emotion/react"
}
```

### craco.config.js
ルート直下に**craco.config.js**を作成して、以下を記述します。

```craco.config.js
module.exports = {
  babel: {
    presets: [
      [
        "@babel/preset-react",
        { runtime: "automatic", importSource: "@emotion/react" },
      ],
    ],
    plugins: ["@emotion/babel-plugin"],
  },
};
```

### package.json
内容を修正します。

```package.json
"scripts": {
	"start": "craco start",
	"build": "craco build",
	"test": "craco test"
}
```

### 動作確認
cssプロパティが使用できて、デバッグ（`npm start`）したときと、ビルド（`npm run build` → `serve -s build`）したときにスタイルが反映されていればOKです。

```.tsx:App.tsx
import React, { VFC } from 'react';
import { css } from '@emotion/react';

export const App: VFC = () => {
	return (
		<div css={styles.container}>
			<div css={styles.text}>Hello</div>
		</div>
	)
}

const styles = {
	container: css`
		position: relative;
		width: 100vw;
		height: 100vh;
		background-color: #1e1e1e;
		display: flex;
		justify-content: center;
		align-items: center;
	`,
	text: css`
		font-size: 5rem;
		color: #fff;
	`
}
```

<!-- =========================================================== -->
# Next.js への導入
<!-- =========================================================== -->
以下の記事の抜粋になっています。
パッケージについて詳しく知りたい方は、こちらも併せて参照してください。

https://zenn.dev/rabbit/articles/e7376c9fce90db

### プロジェクト作成
適当なプロジェクトフォルダを作成して、以下を実行します。

```shell
npx create-next-app . --ts --use-npm
```

### パッケージインストール
以下をインストールします。

```shell
npm i @emotion/react
npm i -D @emotion/babel-plugin
```

https://emotion.sh/docs/@emotion/babel-plugin

### tsconfig.json
設定を追加します。

```tsconfig.json
"compilerOptions": {
	"jsxImportSource": "@emotion/react"
}
```

### .babelrc
ルート直下に**.babelrc**を作成して、以下を記述します。

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

### 動作確認
cssプロパティが使用できて、デバッグ（`npm run dev`）したときと、ビルド（`npm run build` → `npm start`）したときにスタイルが反映されていればOKです。

コードはCRAの場合と重複するので割愛します。

### 補足：nth-child を使う場合
**nth-child**を使う場合、さらに追加で設定が必要になるようです。
ここでは取り上げませんが、設定方法を知りたい方は、以下の記事を参考にしてください。

https://qiita.com/282Haniwa/items/243f00c39ee7c992d7f7