Updates MDX docs (#56378)

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](https://linear.app/vercel/issue/DX-2095/improve-nextjs-mdx-docs)

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

### App Router 

![localhost_3332_docs_pages_building-your-application_configuring_mdx (1)](https://github.com/vercel/next.js/assets/446260/2a2b1a66-c794-4831-ab89-a6a61d02eb84)

### Pages Router

![localhost_3332_docs_pages_building-your-application_configuring_mdx](https://github.com/vercel/next.js/assets/446260/cc60a8a2-a931-4033-aaba-e989a719692d)

Author: manovotny