Next.js + Rive でBad Header, Problem loading file; may be corrupted と出た時にチェックすること

概要

こちらを見てNext.jsのアプリにrivをぶち込んで見ようとした時、

app/pages.tsx

では普通にレンダーできていたRiveComponentが、

app/chat-history/[id]/page.tsx

で呼ぼうとすると

Bad Header, Problem loading file; may be corrupted!

というエラーになってしまいました。

そもそものRiveComponentの呼び方

ミニマムなRiveComponentは

RivGirl.tsx

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

export const RivGirl = () => {
    const { RiveComponent } = useRive({
        src: "girl.riv",
        autoplay: true,
    });

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

としていました。
このとき、girl.riv は
プロジェクトのルートにpublicフォルダを作り、
public/girl.riv　とすること。

解決策

RivGirl.tsx

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

export const RivGirl = () => {
    const { RiveComponent } = useRive({
        src: "/girl.riv",
        autoplay: true,
    });

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

と、

src: "girl.riv"
から
src: "/girl.riv"

と / を入れる必要がありました。

この辺を見ていたときに/がないことに気づきました。

以上。