Embedding a GGPlotly into Gatsby page

Question

THE INTRO: I am trying to embed ggplotly graphs into a Gatsby webpage I am learning to create. After arguing back and forth with ChatGPT for a couple hours, I'm seeking out your knowledge.

Here is at mtcars example to simply:

library(ggplot2)
library(plotly)

p <- ggplot(mtcars, aes(x = wt, y = mpg)) +
  geom_point()

p_plotly <- ggplotly(p)
htmlwidgets::saveWidget(p_plotly, "path/to/save/plot.html")

Here is the webpage.

import * as React from "react"
import Layout from "../components/Layout"
import * as styles from '../styles/home.module.css'
import { Link, graphql } from "gatsby"
import { GatsbyImage, getImage } from "gatsby-plugin-image"

export default function Home({ data }) {
  console.log(data)
  const image = getImage(data.file.childImageSharp.gatsbyImageData)

  return (
    <Layout>
      <section className={styles.header}>
        <div>
          <h2>America Decides</h2>
          <p>Election Day: November 5th, 2024</p>
        </div>
        <GatsbyImage image={image} alt="White House" />
      </section>
      <section>
        <div dangerouslySetInnerHTML={{ __html: `
          <iframe src="/plot.html" width="100%" height="600" frameborder="0"></iframe>
        ` }} />
      </section>
    </Layout>
  )

}

export const query = graphql`
query WhiteHouse {
  file(relativePath: {eq: "white_house.png"}) {
    childImageSharp {
      gatsbyImageData(layout: FIXED, backgroundColor: "rgba(255, 255, 255, 0)")
    }
  }
}
`

"plot.hmtl" is saved in the static folder. The webpage is saved under "src/pages/". ChatGPT was suggesting for a while to do a React component, but then it switched to iframe.

This Medium article suggested a solution, but the charts in question exceed the free version's 524kb limit. So I need to find a solution that allows me to write them as files to my computer and have Gatsby read them from there.

THE ERROR: I keep getting the following error. A 404 error.

There's not a page or function yet at /plot.html Create a React.js component like the following in your site directory at "src/pages/plot.html.js" and then refresh to show the new page component you created.