diff --git a/mdx-components.tsx b/mdx-components.tsx
new file mode 100644
index 000000000..bdc4216ca
--- /dev/null
+++ b/mdx-components.tsx
@@ -0,0 +1,15 @@
+import type { MDXComponents } from 'mdx/types'
+ 
+// This file allows you to provide custom React components
+// to be used in MDX files. You can import and use any
+// React component you want, including components from
+// other libraries.
+ 
+// This file is required to use MDX in `app` directory.
+export function useMDXComponents(components: MDXComponents): MDXComponents {
+  return {
+    // Allows customizing built-in components, e.g. to add styling.
+    // h1: ({ children }) => <h1 style={{ fontSize: "100px" }}>{children}</h1>,
+    ...components,
+  }
+}
\ No newline at end of file
diff --git a/next.config.mjs b/next.config.mjs
index c1babbc24..8e7e94dc9 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -24,6 +24,7 @@ const nextConfig = {
   swcMinify: true,
   experimental: {
     scrollRestoration: true,
+    mdxRs: true,
   },
   webpack: (config) => {
     config.experiments = {