Best example of mdxjs + nextjs?

Is 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 mdx bindings in the future, the common/mdx.js bindings add some features particular to 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](

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. - this looks promising as an alternative to mdxjs, for simple markdown files

After using the api and some plugins, it seems possible to express basic processing without that much effort. It would be nice if there are higher level traversals than unist-util-visit some day. I ran into one clash between es6 output, the unist-util-visit module format, and nextjs/webpack, which I haven’t solved yet.

The docusaurus v2 implementation helps supplement the docs in unifiedjs, when trying to figure out how to actually use the api.

Also, using node child-process has been working okay so far.

Here is a snippet for basic TOC generation which is exposed as a remark plugin:

Please ignore the code style and rough edges. I will update this thread with a link to a more polished snippet later. Hope this helps someone. The snippet relies on some bindings and other bits. If someone actually wants to use this, I can provide all the details if requested.

Also, I realized that I was looking for TOC plugins at the wrong abstraction level. rehype-toc is closer to what I wanted, but I don’t think its flexible enough for a robust mobile implementation of a TOC.