Remove useMDXComponents argument

docs/01-app/02-guides/mdx.mdx

@@ -79,18 +79,18 @@ Create an `mdx-components.tsx` (or `.js`) file in the root of your project to de
 ```tsx filename="mdx-components.tsx" switcher
 import type { MDXComponents } from 'mdx/types'
 
-export function useMDXComponents(components: MDXComponents): MDXComponents {
-  return {
-    ...components,
-  }
+const components: MDXComponents = {}
+
+export function useMDXComponents(): MDXComponents {
+  return components
 }
 ```
 
 ```js filename="mdx-components.js" switcher
-export function useMDXComponents(components) {
-  return {
-    ...components,
-  }
+const components = {}
+
+export function useMDXComponents() {
+  return components
 }
 ```
 
@@ -359,21 +359,22 @@ import Image, { ImageProps } from 'next/image'
 // React component you want, including inline styles,
 // components from other libraries, and more.
 
-export function useMDXComponents(components: MDXComponents): MDXComponents {
-  return {
-    // Allows customizing built-in components, e.g. to add styling.
-    h1: ({ children }) => (
-      <h1 style={{ color: 'red', fontSize: '48px' }}>{children}</h1>
-    ),
-    img: (props) => (
-      <Image
-        sizes="100vw"
-        style={{ width: '100%', height: 'auto' }}
-        {...(props as ImageProps)}
-      />
-    ),
-    ...components,
-  }
+const components = {
+  // Allows customizing built-in components, e.g. to add styling.
+  h1: ({ children }) => (
+    <h1 style={{ color: 'red', fontSize: '48px' }}>{children}</h1>
+  ),
+  img: (props) => (
+    <Image
+      sizes="100vw"
+      style={{ width: '100%', height: 'auto' }}
+      {...(props as ImageProps)}
+    />
+  ),
+} satisfies MDXComponents
+
+export function useMDXComponents(): MDXComponents {
+  return components
 }
 ```
 
@@ -385,21 +386,18 @@ import Image from 'next/image'
 // React component you want, including inline styles,
 // components from other libraries, and more.
 
-export function useMDXComponents(components) {
-  return {
-    // Allows customizing built-in components, e.g. to add styling.
-    h1: ({ children }) => (
-      <h1 style={{ color: 'red', fontSize: '48px' }}>{children}</h1>
-    ),
-    img: (props) => (
-      <Image
-        sizes="100vw"
-        style={{ width: '100%', height: 'auto' }}
-        {...props}
-      />
-    ),
-    ...components,
-  }
+const components = {
+  // Allows customizing built-in components, e.g. to add styling.
+  h1: ({ children }) => (
+    <h1 style={{ color: 'red', fontSize: '48px' }}>{children}</h1>
+  ),
+  img: (props) => (
+    <Image sizes="100vw" style={{ width: '100%', height: 'auto' }} {...props} />
+  ),
+}
+
+export function useMDXComponents() {
+  return components
 }
 ```
 

docs/01-app/03-api-reference/03-file-conventions/mdx-components.mdx

@@ -14,56 +14,45 @@ Use the file `mdx-components.tsx` (or `.js`) in the root of your project to defi
 ```tsx filename="mdx-components.tsx" switcher
 import type { MDXComponents } from 'mdx/types'
 
-export function useMDXComponents(components: MDXComponents): MDXComponents {
-  return {
-    ...components,
-  }
+const components: MDXComponents = {}
+
+export function useMDXComponents(): MDXComponents {
+  return components
 }
 ```
 
 ```js filename="mdx-components.js" switcher
-export function useMDXComponents(components) {
-  return {
-    ...components,
-  }
+const components = {}
+
+export function useMDXComponents() {
+  return components
 }
 ```
 
 ## Exports
 
 ### `useMDXComponents` function
 
-The file must export a single function, either as a default export or named `useMDXComponents`.
+The file must export a single function named `useMDXComponents`. This function does not accept any arguments.
 
 ```tsx filename="mdx-components.tsx" switcher
 import type { MDXComponents } from 'mdx/types'
 
-export function useMDXComponents(components: MDXComponents): MDXComponents {
-  return {
-    ...components,
-  }
+const components: MDXComponents = {}
+
+export function useMDXComponents(): MDXComponents {
+  return components
 }
 ```
 
 ```js filename="mdx-components.js" switcher
-export function useMDXComponents(components) {
-  return {
-    ...components,
-  }
+const components = {}
+
+export function useMDXComponents() {
+  return components
 }
 ```
 
-## Params
-
-### `components`
-
-When defining MDX Components, the export function accepts a single parameter, `components`. This parameter is an instance of `MDXComponents`.
-
-- The key is the name of the HTML element to override.
-- The value is the component to render instead.
-
-> **Good to know**: Remember to pass all other components (i.e. `...components`) that do not have overrides.
-
 ## Version History
 
 | Version   | Changes              |

examples/mdx/mdx-components.tsx

@@ -1,10 +1,8 @@
 import type { MDXComponents } from "mdx/types";
 
-// 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,
-  };
+const components: MDXComponents = {};
+
+// Allows customizing built-in components, e.g. to add styling.
+export function useMDXComponents(): MDXComponents {
+  return components;
 }

packages/next-mdx/readme.md

@@ -105,14 +105,13 @@ yarn add @next/mdx
 Create an `mdx-components.js` file at the root of your project with the following contents:
 
 ```js
-// This file is required to use @next/mdx in the `app` directory.
-export function useMDXComponents(components) {
+// Allows customizing built-in components, e.g. to add styling.
+const components = {
+  // h1: ({ children }) => <h1 style={{ fontSize: "100px" }}>{children}</h1>,
+}
+
+export function useMDXComponents() {
   return components
-  // Allows customizing built-in components, e.g. to add styling.
-  // return {
-  //   h1: ({ children }) => <h1 style={{ fontSize: "100px" }}>{children}</h1>,
-  //   ...components,
-  // }
 }
 ```
 

test/development/acceptance-app/fixtures/app-hmr-changes/mdx-components.ts

@@ -15,30 +15,29 @@ import { Callout } from 'app/(post)/components/callout'
 import { Ref, FootNotes, FootNote } from 'app/(post)/components/footnotes'
 import { Blockquote as blockquote } from 'app/(post)/components/blockquote'
 
-export function useMDXComponents(components: {
-  [component: string]: React.ComponentType
-}) {
-  return {
-    ...components,
-    a,
-    h1,
-    h2,
-    h3,
-    p,
-    ol,
-    ul,
-    li,
-    hr,
-    pre: Snippet,
-    img: Image,
-    blockquote,
-    Tweet,
-    Image,
-    Snippet,
-    Caption,
-    Callout,
-    Ref,
-    FootNotes,
-    FootNote,
-  }
+const components = {
+  a,
+  h1,
+  h2,
+  h3,
+  p,
+  ol,
+  ul,
+  li,
+  hr,
+  pre: Snippet,
+  img: Image,
+  blockquote,
+  Tweet,
+  Image,
+  Snippet,
+  Caption,
+  Callout,
+  Ref,
+  FootNotes,
+  FootNote,
+}
+
+export function useMDXComponents() {
+  return components
 }

test/integration/plugin-mdx-rs/mdx-components.js

@@ -1,8 +1,9 @@
 import { Marker } from './components/marker'
 
-export function useMDXComponents(components) {
-  return {
-    ...components,
-    Marker,
-  }
+const components = {
+  Marker,
+}
+
+export function useMDXComponents() {
+  return components
 }