When I access a site built with next.js using metaquest3, I get a message that WebXR not supported.

[link2004]

I have created a simple program using react-three/xr with Next.js.
That is the code below.

// app/page.js
"use client";

import { Sphere } from "@react-three/drei";
import { Canvas } from "@react-three/fiber";
import { XR, createXRStore } from "@react-three/xr";


export default function Home() {
  const store = createXRStore();
  return (
    <main className="container mx-auto">
      <h1 className="mt-4 mb-4 text-4xl">React Three XR</h1>
      <button onClick={() => store.enterVR()}>Enter VR</button>
      <Canvas shadows className="aspect-video border border-gray-300">
        <XR store={store}>
          <ambientLight intensity={0.2} />
          <directionalLight position={[5, 5, 5]} intensity={1} />
          <Sphere args={[1, 32, 32]}>
            <meshStandardMaterial
              color="#fafafa"
              roughness={0.4}
              metalness={0.4}
            />
          </Sphere>
        </XR>
      </Canvas>
    </main>
  );
}

After executing the yarn dev command,
accessing the site on a PC showed the site as normal.

Click on the Enter VR button,

However, when I access the local host directly with a metaquest3 browser, it does not work properly.

Click on the Enter VR button,

What is the cause of not working with metaquest3?

[link2004]

Self resolved.
yarn dev --experimental-https
and started the server with https and it worked fine.