I have to implements a Rive animation insde an NextJS app. In a different React app that uses Vite, I have no problem loading and displaying a Rive file. However, the only way I can load a Rive file inside my NextJS app seems to be using an external link.

In the console, I received the following errors :
"Bad header"
"Problem loading file; may be corrupt!"

From my investigations, Rive throw these errors when a file is not found.

Here's the code I am using to test a Rive component :

"use client";

import { useRive, useStateMachineInput } from "@rive-app/react-canvas";

export default function RiveCube() {
  const STATE_MACHINE_NAME = "State Machine 1";
  const INPUT_NAME = "Pressed";

  const { RiveComponent, rive } = useRive({
    src: "/rive/cube.riv",
    stateMachines: STATE_MACHINE_NAME,
    artboard: "Cube",
    autoplay: true,
    onLoadError: () => console.log("ERROR LOADING CUBE"),
  });


  return (
      <div style={{ height: "500px", width: "500px" }}>
        <RiveComponent />
      </div>
  );
}

I am at wits end with this...
NextJS version : 14.1.4
@rive-app/react-canvas: "^4.9.0",