Next.js v12→v14への移行で詰まったところ

2024/04/10に公開

Nextjs v14でframer-motionが原因でページが表示されなくなった

v12で運用していたポートフォリオサイトをv14に移行後、下記のエラーに遭遇しました。

エラー内容

⨯ node_modules/framer-motion/dist/es/context/MotionConfigContext.mjs (6:42) @ eval
 ⨯ TypeError: (0 , react__WEBPACK_IMPORTED_MODULE_0__.createContext) is not a function

解決方法

framer-motion使用箇所は'use client'を宣言してクライアントコンポーネントにする

まとめ

ページそのものが表示されなくなってしまったのでテンパったのですが
そもそもこのエラーはどこ起因なのかエラーメッセージをしっかり確認したところ、framer-motionが起因なのではと予想することができました。

下記のissuesと似たような事象だったのですが、この方も'use client'をにしたら解決できたようです。
https://github.com/framer/motion/issues/2398

framer-motionがブラウザー側で動作するので'use client'にする必要があったみたいです。

Since the framer motion makes changes on the browser, it becomes a client component thus we add the "use client"

Discussion