Next.js Discord

Discord Forum

Developer Toolbar

Unanswered
English Angora posted this in #help-forum
Open in Discord
English AngoraOP
Hey everyone! ๐Ÿ‘‹

I've been diving deep into development tools lately and noticed there are only a couple of external solutions for something like a dev toolbar tailored for Next.js. It got me thinking โ€“ is the Vercel team planning or currently working on a dev tool integration directly into Next.js?

Iโ€™ve actually developed a similar tool for my team which has significantly sped up our debugging and testing processes. Hereโ€™s what it looks like (attached pictures).

Iโ€™m considering the possibility of contributing to the project to create a robust solution that could be embedded directly into Next.js. I believe having it integrated could provide deeper insights and make the development experience much smoother.

Do you guys think this is something useful and worth pursuing? Any feedback or thoughts on contributing to such a feature would be greatly appreciated! Looking forward to your ideas and suggestions.

Thanks a lot! ๐Ÿ˜Š

32 Replies

English AngoraOP
I was kinda lost where to ask this question, did dice roll and here we are ๐Ÿ˜›
B33fb0n3
haha happy to help ^^
jelte
would be very nice to be able to see what was being cached and with what cache keys, tags, etc... like the react query devtools which are amazing for the client side cache
Jboncz
Please yes @English Angora There have been talks about some kind of tool, but it hasnt gone anywhere
English AngoraOP
For sure there will be two types of cache info. The one that I showed is based on the page router, but the same (even better) can be done to app router
Jboncz
Yeah... I have been dying for something like that for Next, alot of the community has been
There was a twitter post from someone at vercel talking about making something, but it never happened
English AngoraOP
Absolutely, I noticed that post too. It got me thinking if it hasn't already been taken care of, but there hasn't been any information for quite some time.
Jboncz
I think everyone would greatly appreciate that contribution
English AngoraOP
Sooo, time to get to work ๐Ÿ™‚ any other ideas what would be nice to have and see in Dev tools?
Jboncz
oof Id have to find it. Let me see.
idk how you found that, but thank you ๐Ÿ˜„
English AngoraOP
I did my research before asking about Dev toolbar and started creating one ๐Ÿ˜„
linesofcode
Thank you!
linesofcode
Iโ€™m interested in building something similar
Might try my hand at it today
English AngoraOP
It would be lovely to embed this into nextjs, not as a separate library that will need to add data to each page or fetch
linesofcode
yeah
If you've seen the react query dev tools thats what i have in mind
English AngoraOP
Haven't seen it before
But it looks exactly how I imagine this to work
linesofcode
Have you figured out how to get the data you need?
Give this a look
It's still experiminetal but in theory this is a blue print for how to get this working
(one of the possible ways)
@linesofcode Have you figured out how to get the data you need?
English AngoraOP
Well what I did was adding additional data into returned props inside of getServerSideProps or getStaticProps in Page Router. I imagine retrieving information about cache in more native way as stuff will be built in into the core. The same for App Router - core already has information about caching, there is only to extract them and add in to the component - but no I havent thinking yet about whole architecture