Best example of mdxjs + nextjs?

Is rescriptlang.org the best example of mdxjs usage? Are there any other examples?

Can you be more specific on what you are trying to solve / what you are interested in? Do you mean basic Next / MDX usage, or how to write bindings for mdx components in ReScript?

I understand the basic features of mdxjs. I’m just curious to see different examples of people using it to build out complex features - auto generating table of contents/nav bar, other things that I might not have thought of.

Right now, I’m planning on using mdxjs for controlling styling of classic markdown files. I will start coming up with more ideas for using it soon after that.

For anybody who copies rescriptlang.org mdx bindings in the future, the common/mdx.js bindings add some features particular to rescriptlang.org such “target” for “a” tags as well as more advanced features like “id” generated by “remark-slug”, “MdxChildren” type, “getMdxType” and “getMdxClassName” utilities, which won’t be necessary when first using mdxjs. Once you remove those, the bindings are quick to get going with.


I moved towards using next-mdx-remote within getStaticProps for now, to be able to easily access frontmatter without writing custom mdx bindings.

1 Like

From nextjs blog, this is clever:

// pages/posts/markdown-with-next.mdx

import Layout from '../components/Layout'

export const meta = {
  title: 'Markdown/MDX with Next.js',
  author: 'Lee Robinson'
}

I **love** using [Next.js](https://nextjs.org/)

export default ({ children }) => <Layout meta={meta}>{children}</Layout>

this one in particular turned out to be impractical for us. One of the big advantages of Markdown + frontmatter for meta data is that it is nicely displayed in github as well (github markdown displays frontmatter as a table)

1 Like

Ideally, I would like a layout to read the mdx file once, and then run the markdown through remark-slug, then TOC generation and let me feed that into a sidebar component to produce left nav bar, as well as run the same markdown through mdx rendering to place in a main content area. I might also generate reading time later and last updated stamp later.

Using the mdx loader feels too limiting for this.

Using next-mdx-remote feels inefficient, as I will have to duplicate some processing when adding TOC generation.

Using unified/remark/rehype directly for everything feels too low level. Also, unified is lightly documented currently.

This strikes me as very common task, so I am surprised there isn’t thorough documentation with unified/remark to do these. I see related plugins and will explore them soon

we essentially wrote our own mdx loader to e.g. parse the frontmatter and for creating the gh edit link, that is used on each page in the language manual:

To me, the whole webpack loader apis feel like a huge hack, and i try not to overuse them tbh.

https://github.com/rehypejs/rehype-react - this looks promising as an alternative to mdxjs, for simple markdown files

I am going to explore using ocaml scripts launched through child processes to perform some initial phases of markdown processing, and having rescript continue working with the output from earlier phases (using next-mdx-remote for now, but switching to rehype-react later)

1 Like