How to turn on NextJS FETCH debugging in console. It was available in Next 13.4.4 and is gone in Next 13.4.19

Question

I'm working on a NextJS 13 project and so far I was using 13.4.4 version. In the DEV mode (yarn run dev), there was a nice information about the currently handled FETCH requests from Next's fetch.

It was looking like this and was super useful for understanding what is going on with all the fetch requests and if there is a cache HIT or MISS. After updating to [email protected] it is gone. I am not sure what is the name of it and what to google for.

I would highly appreciate your help!

Mosa

Answer 1

Add this setting to next.config.js:

experimental: {
  logging: "verbose",
}

I couldn't find documentation for it.

Not sure which version supports it, but I upgraded to the latest (13.4.19) at the time of writing and it works there.

It also seems that they plan to change it in the new version (13.4.20) to this format (source):

experimental: {
  logging: {
    level: 'verbose'
  }
}

Confocal

Thank you very much! The logging looks a little bit different now but it gives the same information. Could you please tell me how did you find this information? Indeed it is not in the official docs and I wonder what should be the process of looking for something like this if I came across a similar issue... thanks in advance! – Mosa

Sure! I also remembered that I had it before, so I went to Github releases and searched the page for "log": github.com/vercel/next.js/releases There was nothing on the first page, but on the second: github.com/vercel/next.js/releases?page=2 I found this issue: github.com/vercel/next.js/pull/55111 I tried this setting, but it didn't work. But I got an error saying that logging is not an object, so I figured that it must be a string :) – Confocal

Answer 2

it would seem that it is not experimental anymore, the current configuration is

logging: {
  fetches: {
    fullUrl: true,
  },
},

Quadrireme

Answer 3

You can configure the logging level and whether the full URL is logged to the console when running Next.js in development mode.

Available: NextJs 14.1

module.exports = {
  logging: {
    fetches: {
      fullUrl: true,
    },
  },
}

You can look at the documentation (app router): api-reference/next-config-js/logging

Arta