Using mdx provider in a server component

[gmcamposano]

Summary

1. I first tried to implement it on the page, just as the next docs example, but it fails as it has to be a client component which at the same time can't be done due to the fact that it has meta data: https://nextjs.org/docs/app/building-your-application/configuring/mdx#custom-elements
2. I tried a wrapper using a client component inside the wrapper, but elements are ignored. In my case i am styling an h1 and trying to pass next Image to all images.
3. I even tried importing components inside the MDX files and I get the message: to use ____ you must first import the component

So basically, how can i handle my custom components here:

'use client'
import ImageLoader from '@/helpers/image-loader'
import { MDXProvider } from '@mdx-js/react'

const components = {
  h1: ({ children }) => <h1 style={{ color: '#2c2' }}>{children}</h1>,
  img: ({ src, alt, ...props }) => {
    return <ImageLoader src={src} alt={alt} {...props} />
  },
}

export default async function Wrapper({ children }) {
  return <MDXProvider components={components}>{children}</MDXProvider>
}

page.js

import Wrapper from './wrapper'
import { getPostBySlug } from '@/helpers/blogPostsFetch'
import Wrapper 

const getPageContent = async (slug) => {
  const { content, meta } = await getPostBySlug(slug)
  return { content, meta }
}

export async function generateMetadata({ params }) {
  const { meta } = await getPageContent(params.slug)
  return {
    title: meta.title,
  }
}

export default async function BlogSlug({ params }) {
  const { content } = await getPageContent(params.slug)
  return (
<Wrapper >
    <section>
        {content}
    </section>
</Wrapper>
  )
}

next.config.mjs:

import nextMDX from '@next/mdx'

/** @type {import('next').NextConfig} */
const nextConfig = {
  pageExtensions: ['js', 'jsx', 'ts', 'tsx', 'md', 'mdx'],
  experimental: {
    mdxRs: true,
  },
  images: {
    domains: ['res.cloudinary.com', 'images.unsplash.com', 'unsplash.it'],
  },
}

const withMDX = nextMDX({
  options: {
    remarkPlugins: [],
    rehypePlugins: [],
    providerImportSource: '@mdx-js/react',
  },
})
// module.exports = withMDX(nextConfig)
export default withMDX(nextConfig)

Additional information

No response

Example

No response

[icyJoseph]

Couldn't the components live in another module which could use the 'use client' directive?

Also in your first block, Wrapper can't be async because it is a Client Component.

I didn't use the same package, but here you can see the next-remote-mdx approach:

• All components: https://github.com/icyJoseph/icyJoseph/blob/dev/src/components/Blog/mdx.tsx
• CodeBlock which is a client component https://github.com/icyJoseph/icyJoseph/blob/dev/src/components/Blog/CodeBlock.tsx
• Using it at page (server component) level: https://github.com/icyJoseph/icyJoseph/blob/dev/src/app/blog/%5Bslug%5D/page.tsx

[gmcamposano]

Hello,
So I changed the wrapper to live inside the layout (using the 'use client' directive) and MDX Provider is simply not being read.

One case of this use I want to do is all images have to use the Image component, list styles this way.. etc. That way I dont have to manually repeat the same thing over and over again in the MDX files.
layout.js

'use client'
import { MDXProvider } from '@mdx-js/react'
import Image from 'next/image'

const components = {
  h1: ({ children }) => <h1 style={{ color: '#2c2' }}>{children}</h1>,
  img: (props) => <Image {...props} />,
}

export default function Layout({ children }) {
  return <MDXProvider components={components}>{children}</MDXProvider>
}

I have also included a mdx-components.js

export function useMDXComponents(components) {
  return {
    h1: ({ children }) => (
      <h1 style={{ fontSize: '500px', color: 'green' }}>{children}</h1>
    ),
    ...components,
  }
}

But all it keeps ignoring the configurations I do and just render the content without applying the style.

[gmcamposano]

Thanks! I will update my answer once I try it.
Why I did it like that? I followed a tutorial :D If there was another way i would also have done it that way.

[icyJoseph]

Yeah, I think the tutorial doesn't really make it clear where one tech stack or, rather, technique ends and the other starts. Let me know how it goes! There's a Lee Rob blog where he explains it way better. I'll try to find it.

• https://nextjs.org/blog/markdown

[gmcamposano]

Here you can have a look for context sake: https://youtu.be/n2CV6f0vFr4

[gmcamposano]

Regarding this code. It worked like a charm. But I am now more inclined in following your advised way of writing this. I will read the docs you sent of leerob and try to recreate it for you to evaluate. Thanks a lot and keep you posted.

import fs from "fs";
import path from "path";
import { compileMDX } from "next-mdx-remote/rsc";
import { components } from "../components";

const FOLDER_PATH = path.join(process.cwd(), "posts");

export const getPostBySlug = async (slug) => {
  const fileSlug = slug.replace(/\.mdx$/, "");
  const fileContent = fs.readFileSync(`${FOLDER_PATH}/${fileSlug}.mdx`, {
    encoding: "utf-8",
  });
  const { frontmatter, content } = await compileMDX({
    source: fileContent,
    options: {
      parseFrontmatter: true,
    },
    components,
  });

  return {
    meta: { ...frontmatter, slug: fileSlug },
    content,
  };
};

// omitted getAllPosts

[karlhorky]

Mixing tech stacks

My question here is, why though? @mdx-js/react has its own compiler, which @next/mdx implements under the hood.

First of all, to talk about the downsides of next-mdx-remote/rsc or mdx-bundler:

• next-mdx-remote/rsc doesn't allow for importing MDX files within MDX files
• mdx-bundler requires complicated manual configuration to share components to imported .mdx files (not to mention pulling in a bunch of extra bundling dependencies and running the bundling outside of the existing webpack / Turbopack bundler config)

Secondly, I think there are probably use cases for providing divergent MDX components in different areas (mdx-components.tsx from @next/mdx for all MDX files, and then MDXProvider from @mdx-js/react for providing the divergent components specific to a certain area).

Eg. we want this to implement different provided components in different areas of a large app, without having to do components={props.components} prop drilling as suggested by the docs:

• Using MDXProvider with mdx-components.tsx #69613

---

New @next/mdx API?

We would also be open to having an extra MDXProvider-style export from @next/mdx to be able to provide extra components at arbitrary locations and depths in the tree, in case that would be an option.

I could imagine that this may be an extension to the MDX components RSC support added by @timneutkens in PR #44651

[joshuaavalon]

I don't know if you still are looking for answer. But I found that MDX cannot be used in server component is caused by @mdx-js/react using createContext.

@next/mdx includes @mdx-js/react by default.

next.js/packages/next-mdx/index.js

Lines 24 to 28 in 87b66f6

	config.resolve.alias['next-mdx-import-source-file'] = [
	'private-next-root-dir/src/mdx-components',
	'private-next-root-dir/mdx-components',
	'@mdx-js/react',
	]

To work around it, you can set providerImportSource to private-next-root-dir/src/mdx-components or private-next-root-dir/mdx-components to prevent loading @mdx-js/react.

Create mdx-components.tsx in the root of your application (the parent folder of app/ or src/).

Use the example from https://nextjs.org/docs/app/building-your-application/configuring/mdx.

You don't need MDXProvider to pass in custom components. You can pass by mdx-components.tsx for global components and <MdxTag components={components} /> for MDX-specific component.

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,
  }
}

Then you should able to import .mdx in server component.

[lsagetlethias]

What if you want an in-between kind of configuration?
Where you can have custom components only for one folder ((routesGroup) or sub routes) either by having a local mdx-components.tsx or by using a provider in the localised layout.tsx

[LordZardeck]

This is my current issue. My blog post articles will use different styles for headers, links, etc, and i'd like my layout within /blog to configure these overrides.

[gao-sun]

@gmcamposano you saved my day. thanks.

[Cliftonz]

Also having this issue