Next.js version13環境にEmotionを入れたい
この記事は最終更新日から1年以上が経過しています。
![](https://firebasestorage.googleapis.com/v0/b/webdevelopers-1886f.appspot.com/o/images%2F%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-12-04%2010.36.41.png?alt=media&token=5f9fec5f-b4db-4761-a43d-357dd76a8e27)
Next.js 12.2でEmotionが標準でサポートされたため簡単に新しいNext.jsのプロジェクトにEmotionをインストールすることができましたのでメモいたしました。
まずはモジュールをインストールします。
$ npm install --save @emotion/react @emotion/styled
なんとこれで完了です。
いざサーバーを立ち上げてみます!
$ npm run dev
!
なんと謎のエラーが出てしまいました。
![](https://firebasestorage.googleapis.com/v0/b/webdevelopers-1886f.appspot.com/o/images%2F%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-12-02%2022.42.57.png?alt=media&token=666fbe43-7b57-408f-9f5b-59eea90cfc6a)
next.config.jsにcompilerオプションを記述しないといけないようでした。
なので下記を追記いたします。
// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
compiler: {
emotion: true
} // 追記しました
}
module.exports = nextConfig
では再度サーバーを立ち上げます。
$ npm run dev
![](https://firebasestorage.googleapis.com/v0/b/webdevelopers-1886f.appspot.com/o/images%2F%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-12-02%2022.52.52.png?alt=media&token=533d5331-606d-4101-9345-c650992ae2fb)
無事に出力されていました。
一安心です。
ここまでお読みくださりありがとうございました。