Export NextJS project as a module-CodePudding

I'm looking for a little guidance and suggestions here. My attempts and theories will be at the bottom.

I have a NextJS project from which I want to export the top level component (essentially the entry file) so that I can use it as a preview in my dashboard.

The nextjs project is very simple. For the sake of simplicity, let's imagine that all it renders is a colored <h1>Hello world</h1>. Then in my dashboard, I want to render a cellphone with my NextJS component embedded and then from the dashboard change the color of the text, as a way to preview how it would look like. I hope this makes sense.

I'm lost at how I could export this component from NextJS and import it into my dashboard. The dashboard is rendered in Ruby on Rails. It would be simple enough to just import the repo from git and access the file directly form node_modules, but I'm looking for a solution that doesn't require installing npm on our Rails project.

Paths I have thought about:

1 - Install npm on Rails and just import the source code from NextJS repo and access the file and render with react (Simple, but we're looking for a non-npm solution)

2 - Bundle the component with webpack and load it directly into rails (does this even work?) - I exported the js and all it did was freeze everything :P Still trying this path for now

3 - Using an iframe and just accessing the page (then I can't pass any callbacks into the iframe to change the color directly from the dashboard)

4 - I cannot separate this component from NextJS to use as a library in both repos. The component we are exporting is the "ENTIRE" NextJS app jsx and it wouldn't make sense to separate in a different repo

Does anyone have a suggestion on how I could achieve this?

CodePudding user response：

I think you could use an iframe with the nextjs app url. Then if you want to change the color, simply add the color in query parameter of the iframe and handle it on nextjs app.

Simple example

Rails view (erb)

<iframe src="#{@nextjs_url}?color=#{@color}" />

NextJS

# do something to get the query param of the page and and set to prop of the component
const YourComponent = ({color}) => {
    return <h1 style={{color}}>Lorem</h1>;
}

CodePudding user response：

While trying Hoang's solution, I decided to dive deeper into how to communicate with an iframe and the solution actually feels quite good.

You can set up listeners on either side and post messages in between the projects.

So in my dashboard:

 function handleEvent(e) {
      const data = JSON.parse(e.data)
      if (data.type === "card_click") {
        //if type is what we want from this event, handle it
      }
    }
 
 // Setup a listener with a handler 
 // This will run every time a message is posted from my app  
 window.addEventListener("message", handleEvent, false)

  const postMessage = (color) => {
    const event = JSON.stringify({
      type: "color_update",
      color,
    })

    // Find the iframe and post a message to it
    // This will be picked up by the listener on the other side
    document.getElementById("my-iframe-id").contentWindow.postMessage(event, "*")
  }

And on my app:

    function handleEvent(e) {
      const data = JSON.parse(e.data)
      if (data.type === "color_update") {
         // Do whatever is necessary with the data
      }
    }

    // Setup listener
    // This will fire with every message posted from my dashboard
    window.addEventListener("message", handleEvent, false)

  const handleCardClick = (cardIndex) => {
    const event = JSON.stringify({
      type: "card_click",
      cardIndex,
    })
    // post message to parent, that will be picked up by listener
    // on the other side
    window.parent.postMessage(event, "*")
  }

It feels pretty straight forward to communicate with an iframe with this solution.