Docs: could use some info on how to understand the react component tree

What is the improvement or update you wish to see?

I am attempting to understand the correspondence between the source code of a NextJS app and what I see in the debugger. The React Dev Tools helps but yields a component tree that's highly unintuitive and I can't find any docs explaining it:

1. There are tons of nested components and context providers I don't recognize that seem to be related to client side SPA routing, hydration etc.
2. It's not clear where my apps root page actually starts.
3. Some components I expect to be there and which I can see in the page don't appear in the tree, instead I see lots of "Anonymous (forward ref)" and similar. Using the mouse-driven component picker to click on something I expect to be a React component instead zaps me to a "LayoutRouterContext.Provider".

In short it feels like next.js renders the React dev tools pretty useless unless you're already a frontend expert. I'd like some documentation to help me understand what I see in the debugger.

Is there any context that might help us understand?

I'm not a full time frontend dev by profession, so am not a react or JS expert.

Does the docs page already exist? Please link to it.

No response

Start with a minimal Next.js app and inspect its React DevTools component tree, focusing on the root page, routing and hydration providers, and anonymous or forwarded-ref components. Done means documentation explains how these entries correspond to application source and how to identify the app's root page and rendered components.