Debugging fetch operations in next.js

Question

So I want to debug my next.js app. Problem is a big part will not debug. So I added the chrome attached debugger (in launch.json):

        {
        "type": "pwa-chrome",
        "request": "launch",
        "name": "Launch Chrome against localhost",
        "url": "http://localhost:3010",
        "webRoot": "${workspaceFolder}"
    }

So the way I use this is I run in a terminal: "npm run dev" and then press F5 in vscode. This works partially as the react components & next.js pages will be debugged. The problem is the fetch calls with getStaticProps() will not.

So I looked in the docs of next.js and there it is written, use script like: "dev": "NODE_OPTIONS='--inspect' next dev" When I then run next in the terminal with: "npm run dev" I get a build error: the command "NODE_OPTIONS" is either written wrong or could not be found.

So how can I debugg these next.js functions like getStaticProps() ? Also should I write an issue-ticket to next.js?

Edit: It should also mention that the API is a asp.net core API, not a next.js API.

Edit 2: Well now I am bypassing this problem by using the SWR package.

Answer 1

I think you can leverage Preview Mode. It renders the pages at request time instead of build time so that your debugger / logs should work. You have to update your getStaticProps function to use context.preview in order for it to work:

export async function getStaticProps(context) {
  // If context.preview is true, append "/preview" to the API endpoint
  // to request draft data instead of published data. This will vary
  // based on which headless CMS you're using.
  const res = await fetch(`https://.../${context.preview ? 'preview' : ''}`)
  // ...
}