So, I've written some javascript that uses Axios to emulate some HTTP requests to eventually return a json payload.

This is split up into four different requests. If there is a better way to do this, please let me know.

Basically, when I send an HTTP request with login credentials to this site, it returns a token in HTML - this token would normally be stored in session storage, however since it's an http request, the javascript never runs. Because of this, I parse the returned HTML for the relevant token and attach it to my next request which returns HTML with another token, which I then attach. Eventually I receive a JSON response with the data I actually want.

At this point, I would like to build a GUI for users to consume this data and perform a plethora of functions on it.

How do I get this working in NextJS/React? All of the tutorials and information seem to be for basic API fetches.

Current the code is essentially:

main():
  response = await request1(config, cookies)
  body = await parseHTML(response)
  cookies = await parseCookies(response)
  response = await request2(config, cookies, body)
  body = await parseHTML(response)
  cookies = await parseCookies(response)
  response = await request3(config, cookies, body)
  var json_payload = response.data
  return json_payload

How would I convert this to run in NextJS? Where does it go in the project? How do I call it? How do I access the data?

Sorry if this is basic, I'm historically a backend dev in C#.