How to create table of contents for mdx pages?

[xdev0x]

Summary

Need something like what mdast-util-toc produces for .md files.

Additional information

Currently using below `next.config.mjs`

// next.config.mjs
import remarkFrontmatter from 'remark-frontmatter'
import remarkToc from 'remark-toc'
import createMDX from "@next/mdx";

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  pageExtensions: ["js", "jsx", "ts", "tsx", "md", "mdx"],
};

const withMDX = createMDX({
  extension: /\.mdx?$/,
  options: {
    remarkPlugins: [remarkFrontmatter, remarkToc],
    rehypePlugins: [],
  },
});

export default withMDX(nextConfig);

I've added remarkToc in options but not sure how it will generate toc or perhaps how to use it to create toc. Basically i want table of contents for a page generated from .mdx file, something similar to what mdast-util-toc produces for .md files.

### Example

_No response_

[sina-byn]

@xdev0x remarkToc looks for # Table of contents inside of your markdown. That's where the toc gets injected.

Try

# Table of contents

# Heading 1
## Heading 2
### Heading 3

[tisonkun]

What if I'd collect the headings' info and create my own TOC component?

[sina-byn]

@tisonkun
Well I ended up doing the same thing in my own project.

I read the mdx files and extracted the headings using remark.

But I would definitely prefer a shared context between next config remark plugins and page and layout files.

[tisonkun]

@sina-byn Thanks for your information. That's what I'm considering now ..

Even if @next/mdx don't want to provide frontmatter/headings out of the box, it would be better that, when I'm using remark/rehype plugins, the mdx loader would be aware of vfile's data rather than I'd shift export const by myself. After all, the ecosystem seems not to build such common layer so that I need to patch the data convey path every time 🤣

[sina-byn]

@tisonkun

That's just TOC the more data you need from the mdx the more logic you'll need to implement. You'll possibly end up reading, parsing and traversing the AST quite a few times which is not performant at all.