Updates MDX docs

[manovotny]

When trying to update my own website to use App Router, I found the current Next.js Docs were missing specifics to get it working (most notably, no mention of pageExtensions). Coupled with community feedback, we decided to revisit and rework the entire page.

The page has been walked through and tested on brand new create-next-app projects for both App and Pages Routers to ensure completeness.

Closes DX-2095

Rendered pages while running locally, in case they are more helpful in seeings the changes and different between routers.

App Router

Pages Router

[leerob]

Love it!

[dominik-sfl]

This is great. One thing I haven't been able to figure out is how to get access to the meta object that is exported from the mdx files? And how would I then get access to all of my mdx files' metadata (if I wanted to loop over them, for, e.g. a blog index).

Would it be possible to add more examples or explanations of those issues, relating to metadata & creating a blog index page? Or maybe see a little example project that uses @next/mdx to create a basic blog? There does not seem to be much online, most of the tutorial are using next-mdx-remote.