From 20b115e827c43d7191740fc190f20ddaf89e536d Mon Sep 17 00:00:00 2001
From: Soheil Nazari <113988347+s0h311@users.noreply.github.com>
Date: Wed, 19 Jul 2023 23:55:40 +0200
Subject: [PATCH] wrong content for next.config.mjs for MDX Plugins (#52738)

---
 .../06-configuring/05-mdx.mdx                        | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/docs/02-app/01-building-your-application/06-configuring/05-mdx.mdx b/docs/02-app/01-building-your-application/06-configuring/05-mdx.mdx
index 1c69b4121884c..8baecf5d18d86 100644
--- a/docs/02-app/01-building-your-application/06-configuring/05-mdx.mdx
+++ b/docs/02-app/01-building-your-application/06-configuring/05-mdx.mdx
@@ -243,7 +243,10 @@ 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: {
@@ -251,15 +254,16 @@ const nextConfig = {
   },
 }
 
-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