Hi. I have a third party system that needs to use some part of my Next.js application. I need to integrate these systems. What I want to do is a render of a specific component including the styles and javascript required to run it on the client and then import that HTML and use it in another system.

import { ProgressBar } from '@susu/headless-commerce/components/ProgressBar/ProgressBar'
import type { NextRequest } from 'next/server'

export async function GET(request: NextRequest) {
  const ReactDOMServer = (await import('react-dom/server')).default
  const Component = ProgressBar

  const componentHtml = ReactDOMServer.renderToStaticMarkup(<Component />)

  return new Response(componentHtml, {
    headers: { 'Content-Type': 'text/html' },
  })
}

I made this and it works as intended but it does not do the styles or client side javascript. I understand that this is a weird use case but I am wondering if anyone has successfully done something like this. Can I use the Next.js API instead of react-dom/server to render a single component instead of a complete page?