Embed a nextjs - react component into another app using a script

Question

I'm trying to create a microservice in nextjs and react so I can use it in a Hippo-CMS application based on Java and Freemarker. Is this possible?

I have created a react only project (I have not installed nextjs) and I have created a component:

import React from "react";
import ReactDOM from "react-dom";
import "tailwindcss/tailwind.css";
import "./globals.css";
import Basket from "./components/Basket/Basket";

ReactDOM.render(
  <React.StrictMode>
    <Basket />
  </React.StrictMode>,
  document.getElementById("basket-container")
);

I have installed webpack and babel to package the react component and I have exposed the bundle through a local nginx server, then I have placed it in an ftl template using:

<div id="basket-container" >
<script src="http://localhost:4000/basket"></script>

I'm not very familiar with this, I have several questions, is this a spa? Can I do it if I install nextjs? Is it correct to do it like this? Is there a way to render it on a server? Could I use Module Federation?

Thanks.