Using @react-three/fiber and drei with Next 15 (Using React 19)

Overview

When using @react-three/fiber with Next 15 (which uses React 19), the following is stated:

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.

However, when I added the following for mouse controls, it did not work well with @react-three/fiber@rc.

This is a note on how to address this issue.

This information is current as of the time of writing (2025-02-06).

First, instead of @react-three/fiber@rc, I needed to install @react-three/fiber@alpha. (Using @beta may also work.)

For drei, I installed @react-three/drei@10.0.0-rc.1. As a result, the following combination installed successfully.

There may be insufficient considerations, but I hope this is helpful as a reference.