Pages don't load and crash NextJS server when integrating API data

Builder content link
Builder.io: Visual Development Platform

Builder public api key
2b7213888e824c06bd1db234f3e73021

Detailed steps to reproduce the bug

  • Create a simple nextjs app and go through the integration steps to integrate with builder.io
  • Follow the steps for connecting api data Connecting your API data to builder - Builder.io
  • Initially all seems well but after publishing and trying to connect to the page via localhost or leaving the builder page and coming back, the page used for following the connecting api data article will continue to cause the nextjs server to quit with no output on what might be happening

I can view the page after enabling the fallback editor but then I’m not able to live edit my page as I would like to. I’m not sure if I missed something here but any help would be appreciated, thanks!

Screenshots or video link
Loom | Free Screen & Video Recording Software | Loom

Code stack you are integrating Builder with
NextJS

Interestingly, if I create a demo custom component like this to access the api data, then I don’t have any issues loading content

import React, { useEffect, useState } from "react";

function RandomUserList() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch('https://randomuser.me/api?results=10')
      .then((res) => res.json())
      .then((data) => setUsers(data.results));
  }, []);

  return (
    <div>
      {users.map((user) => (
        <div>{user.gender}</div>
      ))}
    </div>
  );
}

export default RandomUserList;

Greetings @biscotti,

We extend a warm welcome to the Builder.io forum.

We regret to inform you that we were unable to replicate the issue on our end during local development. We kindly request you to provide us with the version details of the Builder.io: Visual Development Platform SDK and Node.js you are currently using.

Thank you for your cooperation.

Thank you for the reply @manish-sharma, I actually stumbled upon this thread that I didn’t see earlier and it was able to resolve my issue The localhost:3000 server stops upon refreshing a new page in Builder or localhost:3000.

It looks like it was a nodejs version issue and once I downgraded from 20.10.0 to 19.8.1 then my page loaded fine.

Thanks for looking into it!

1 Like

Thank you @manish-sharma and @biscotti
I will try it.