Next.js12.2 + Emotion 環境構築

Next.jsのバージョン12.2からEmotionの@emotion/babel-pluginが不要になったらしいのでその設定を行う。

Create Next-app

yarn create next-app --typescript

yarnじゃなくてnpmでも良い
対話でプロジェクト名聞かれるので適当につける

cd プロジェクト名

mkdir src

pagesとstylesをsrc配下に移動する。
この手順は別に飛ばしてもいい

mkdir src
mv pages src/pages
mv styles src/styles

tsconfig.jsonに以下を追記

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": ["./src/*"],
      "/*": ["*"]
    },
   ....略
}

add emotion

emotionをインストールする

yarn add @emotion/react

css 属性を使用するためにtscongfig.jsonに以下を追記

 {
    "compilerOptions": {
      "baseUrl": "./",
      "paths": {
        "@/*": [ "./src/*" ],
        "/*": [ "*" ]
      },
     "jsxImportSource": "@emotion/react",　// 追記
      .....略
  }

END

以上で環境構築は終わりです。
.babelrcファイルなどを作成しなくてよくなったみたいなので、少し手間が省けました。

Emotionについては自分もまだ経験があまりないので、これから覚えていきたいと思います。