diff --git a/examples/data-literate/next.config.js b/examples/data-literate/next.config.js
deleted file mode 100644
index f1d00b2b..00000000
--- a/examples/data-literate/next.config.js
+++ /dev/null
@@ -1,19 +0,0 @@
-const toc = require('remark-toc')
-const slug = require('remark-slug')
-const gfm = require('remark-gfm')
-const footnotes = require('remark-footnotes')
-
-
-
-const withMDX = require('@next/mdx')({
-    extension: /\.mdx?$/,
-    options: {
-        remarkPlugins: [gfm, toc, slug, footnotes],
-        rehypePlugins: [],
-        providerImportSource: '@mdx-js/react',
-    },
-})
-module.exports = withMDX({
-    // Append the default value with md extensions
-    pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'],
-})
\ No newline at end of file
diff --git a/examples/data-literate/next.config.mjs b/examples/data-literate/next.config.mjs
new file mode 100644
index 00000000..5be15562
--- /dev/null
+++ b/examples/data-literate/next.config.mjs
@@ -0,0 +1,18 @@
+import gfm from 'remark-gfm'
+import toc from 'remark-toc'
+import slug from 'remark-slug'
+import withMDXImp from '@next/mdx'
+
+const withMDX = withMDXImp({
+  extension: /\.mdx?$/,
+  options: {
+    remarkPlugins: [gfm, toc, slug],
+    rehypePlugins: [],
+    // If you use `MDXProvider`, uncomment the following line.
+    providerImportSource: "@mdx-js/react",
+  },
+})
+export default withMDX({
+  // Append the default value with md extensions
+  pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'],
+})
\ No newline at end of file