Skip to content

How to add custom component mapping with @mdx-js/loader? #2032

Answered by remcohaszing
joulev asked this question in Q&A
Discussion options

You must be logged in to vote

MDX components can be injected in Next.js in two ways. Both involve editing pages/_app.js.

  1. You can inject the components prop into all of your pages. This will make the prop available in all of your pages, including non MDX pages, but not components defined outside of pages.

    // pages/_app.tsx
    import { Heading } from '../components/Heading'
    import { MDXComponents } from 'mdx/types'
    import { AppProps } from 'next/app'
    
    const components: MDXComponents = {
      h1: Heading
    }
    
    export default function App({ Component, pageProps }: AppProps) {
      return <Component {...pageProps} components={components} />
    }
  2. You can insert a @mdx-js/react provider and set it as the providerImportSource. This will…

Replies: 2 comments 4 replies

Comment options

You must be logged in to vote
2 replies
@joulev
Comment options

@wooorm
Comment options

Comment options

You must be logged in to vote
2 replies
@joulev
Comment options

@karlhorky
Comment options

Answer selected by joulev
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Category
Q&A
Labels
None yet
4 participants