I use Next.js & MDX for my personal website and some documents, I want to display a “table of content”, a list of headings, for each article.
I’ve tried the plugin remark-toc but it’s too complex (for me). I spend hours still couldn’t make the toc work… So, I tried to write it by myself.
Get The List of Headings
Here’s the code for getting the list of headings:
Add IDs to Headings
I use the
MDXProvider to render the Markdown content, then customize the components in a separate file.
Here’s the customized
Now, everything works as I expected. I made a Next.js & MDX starter, click here to visit the repo could find the whole code.