I am trying to make a next js app to display multiple 3D GLTF blender models, I have all models in a folder named models in public directory. I want to make a efficient method like using md files which I can add to a folder and it specifies path to the model and some info about model and inject all of that data in this page down below

export default function Model() {

  const [ top,setTop ] = useState(0)

  function ShowSecond(){
    if(top==0){
      setTop(1)
    }else{setTop(0)}
  }

  return (
    <div className="Model_Display">

      <div className="Model_Display_Canvas">
        <Canvas className=''>
          <ambientLight intensity={0.5} />
          <directionalLight position={[-2, 5, 2]} />
          <OrbitControls/>
          <Box/>
        </Canvas>
      </div>
      <div className="Model_Display_Canvas_1 " style={{opacity:top}}>
        <p></p>
      </div>

      <div className="Model_Display_Menu">
      <Image
        onClick={ShowSecond}
        src={'/img/navbar/menu.png'}
        width={40}
        height={40}
      />
    </div>
    </div>
  )
}