@mdx-js/mdx - want to consult the correct way that pass props from MDXLayout to MDXContent

[ChinW]

Context

• The MDXProvider is deprecated in 2.0 version as describe here
  https://github.com/mdx-js/mdx/tree/main/packages/react#use
  It prefers to directly pass the components into exported function MDXContent.
• I am using nextra, and trying to update the MDXProvider usage here since it is not working anymore
  https://github.com/shuding/nextra/blob/core/packages/nextra-theme-docs/src/misc/theme.js#L291

Question I met

• nextra package output below style source code to @mdx-js/loader
  https://github.com/shuding/nextra/blob/core/packages/nextra/src/loader.js#L299

Hello, world!

export default function NextraPage (props) {
    return <div>Just for demo</div>
}

This generated mdx code as below:

/*@jsxRuntime automatic @jsxImportSource react*/
const {jsx: _jsx} = arguments[0];
const MDXLayout = function NextraPage(props) { // HERE: This is the props we can manage
  return _jsx("div", {
    children: "Just for demo"
  });
};
function MDXContent(props = {}) {
  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {
    children: _jsx(_createMdxContent, {})
  })) : _createMdxContent();
  function _createMdxContent() {
    const _components = Object.assign({
      p: "p"
    }, props.components); // HERE: the props is from **MDXContent** function not MDXLayout, in `nextra`/`next.js`, if you visit /pages/my-mdx.mdx , you can not pass props to **MDXContent** directly
    return _jsx(_components.p, {
      children: "Hello, world!"
    });
  }
}
return {
  default: MDXContent
};

Thoughts

would this prototype work

function MDXContent(props = {}) {
  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {
    children: _jsx(_createMdxContent, {})
  })) : _createMdxContent();

  function _createMdxContent(propsB = {}) { // NEW
    const _components = Object.assign({
      p: "p"
    }, props.components, propsB); // NEW
    return _jsx(_components.p, {
      children: "Hello, world!"
    });
  }
}

[wooorm]

• MDXProvider is not deprecated. But it’s often not needed. More in the docs: https://mdxjs.com/docs/using-mdx/#mdx-provider.
• We compile MDX to a component, as you can see from the output. Next.js decides that components are rendered already (as in, that you get children here instead of a component). We don’t do that, other frameworks don’t do that. It’s a conscious decision by Next.js that prevents you from passing stuff, and we can’t get around it.
• I would recommend looking at the new capabilities of plugins instead of string building like this,
  example.

---

I don’t really understand the problem, you could create a factory function that gets props that wraps layouts?
I don‘t understand your proposal, _createMdxContent is called twice with nothing?

[godmar]

Just to confirm, this comment applies to next.js 12.0.2 and MDX v2, is this correct? Specifically, when using next.js's mdx integration, it is impossible to pass properties to the MDX file, so attempts at doing <MyComponent src={props.source} /> inside MDX will not work because it is not possible to set the source prop.

[wooorm]

You can export getStaticProps and such from MDX files. That’s the method Next.js uses to pass props to pages.

[ChinW]

much appreciated @wooorm for checking and helps!

Re: Next.js decides that components are rendered already (as in, that you get children here instead of a component)

yep that's true, I am just start learning those these days, let me dig more, this seems more be nextra problem.

[wooorm]

And for the title of your question “pass props from MDXLayout to MDXContent”, I think the flow is just the other way: props passed to MDXContent are passed to MDXLayout. Because MDXContent is the component exposed to users, but MDXLayout is used inside it by us, we are the ones passing props to it, not the other way around!

Cool to see nextra working on updating, do let me know of further questions!