Tengo una API que devuelve un html (cifra convertida en html) y me gustaría mostrar este html en mi página nextjs pero no sé cómo. Este es mi código api:
@router.get("/graph/{id_file}", name="Return the graph obtained") async def create_graph(id_file: str): data = HAR.preparaDatos(id_file) dataFinal = HAR.dataYprediccion(data, 'routes/modelo.h5') fig = px.scatter(dataFinal, x=dataFinal['dateTimes'], y=dataFinal['nameActivities']) ht=fig.to_html() return HTMLResponse(ht)Y devuelve este gráfico (en html): Graph
Y este es mi código en nextJS donde intento mostrar este gráfico:
<div className="grid"> <p className="description"> In this graph you can see the activity performed. </p> {isLoading && <p className="loading">Loading graph...</p>} <p className="graph"> <script src={`http://127.0.0.1:8000/showGraph/graph/${id}`} /> </p>Pero finalmente no puedo ver el gráfico en mi página, ¿alguien sabe qué podría estar mal?
Puede usar Reacts peligrosamente SetInnerHTML para convertir HTML en un elemento. https://reactjs.org/docs/dom-elements.html
<div dangerouslySetInnerHTML={{__html: yourHTML}} />