File-system conventions: mdx-components.js | Next.js

MenuUsing App RouterFeatures available in /appLatest Version16.1.6API ReferenceFile-system conventionsmdx-components.jsCopy pagemdx-components.jsLast updated February 27, 2026The mdx-components.js|tsx file is required to use @next/mdx with App Router and will not work without it. Additionally, you can use it to customize styles. Use the file mdx-components.tsx (or .js) in the root of your project to define MDX Components. For example, at the same level as pages or app, or inside src if applicable. mdx-components.tsxTypeScriptJavaScriptTypeScriptimport type { MDXComponents } from 'mdx/types' const components: MDXComponents = {} export function useMDXComponents(): MDXComponents { return components } Exports useMDXComponents function The file must export a single function named useMDXComponents. This function does not accept any arguments. mdx-components.tsxTypeScriptJavaScriptTypeScriptimport type { MDXComponents } from 'mdx/types' const components: MDXComponents = {} export function useMDXComponents(): MDXComponents { return components } Version History VersionChangesv13.1.2MDX Components addedLearn more about MDX ComponentsMDXLearn how to configure MDX and use it in your Next.js apps.Was this helpful?