NextJS debug toolbar

[gregdingle]

Feature request

This is motivated by time spent understanding and debugging:

• Preview mode
• getStaticProps
• fallback: blocking, fallback: true, fallback: false
• revalidate
• server-side and client-side performance

Describe the solution you'd like

It would be awesome to have a toolbar for nextjs developers like the django debug toolbar (https://github.com/jazzband/django-debug-toolbar) that surfaces the key variables and timings in terms of the nextjs framework. It would tell you at glance whether a page was generated in preview mode or because revalidate: true. And it would tell you how long the regeneration took.

The "toolbar" could simply be an expansion of the existing, official nextjs link-prefetch-transition indicator.

[landsman]

Good inspiration: https://tracy.nette.org/en/.
You can actually write your plugins to this toolbar which is great for example for localization.

[landsman]

I just saw this on Reddit and it shows the need for such a thing: https://www.reddit.com/r/nextjs/comments/1b6qy4h/nextcachetoolbar/

@leerob Do you have something like this in the backlog?

I saw that Astro has a brand new modular toolbar and it looks amazing: https://astro.build/blog/astro-4/#the-astro-dev-toolbar

[landsman]

Guillermo tweeted about something like this: https://twitter.com/rauchg/status/1757402186060083272?s=20