wrong content for next.config.mjs for MDX Plugins (#52738)

docs/02-app/01-building-your-application/06-configuring/05-mdx.mdx

@@ -243,23 +243,27 @@ You can optionally provide `remark` and `rehype` plugins to transform the MDX co
 
 Since the `remark` and `rehype` ecosystem is ESM only, you'll need to use `next.config.mjs` as the configuration file.
 
-```js filename="next.config.js"
+```js filename="next.config.mjs"
+import remarkGfm from 'remark-gfm'
+import createMDX from '@next/mdx'
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   experimental: {
     appDir: true,
   },
 }
 
-const withMDX = require('@next/mdx')({
+const withMDX = createMDX({
   options: {
-    remarkPlugins: [],
+    extension: /\.mdx?$/,
+    remarkPlugins: [remarkGfm],
     rehypePlugins: [],
     // If you use `MDXProvider`, uncomment the following line.
     // providerImportSource: "@mdx-js/react",
   },
 })
-module.exports = withMDX(nextConfig)
+export default withMDX(nextConfig)
 ```
 
 ## Frontmatter