Next 15（React 19 を使用）で、@react-three/fiberとdreiを使う

概要

Next 15（React 19 を使用）で、@react-three/fiberを使う際、以下のように説明されています。

R3F v8 is not compatible with React 19 or Next 15, which uses React 19. Use the R3F v9 RC instead which can be installed with @react-three/fiber@rc.

（日本語訳）R3F v8 は React 19 や Next 15（React 19 を使用）と互換性がありません。代わりに R3F v9 RC を使用してください。インストールするには @react-three/fiber@rc を使用してください。

一方、マウス操作を行うために以下を追加しましたが、@react-three/fiber@rcとは相性が悪いようでした。

https://www.npmjs.com/package/@react-three/drei

この問題に対する対処法の備忘録です。

方法

本記事執筆時点（2025-02-06）の情報です。

まず、@react-three/fiber@rcではなく、@react-three/fiber@alphaをインストールする必要がありました。（@betaでもよいかもしれません。）

そして、dreiについては、@react-three/drei@10.0.0-rc.1をインストールしました。結果、以下のような組み合わせでは、無事にインストールすることができました。

package.json

    "@react-three/drei": "^10.0.0-rc.1",
    "@react-three/fiber": "^9.0.0-alpha.8",

まとめ

考慮が不十分な点があるかもしれませんが、参考になりましたら幸いです。