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:

Code for getting headings list in a React component

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 h2:

Custom rendered Markdown component.

Now, everything works as I expected. I made a Next.js & MDX starter, click here to visit the repo could find the whole code.

Export Multiple Components

When I structure a React app, I’d like to put the components which are in the same category but with different styles in the same folder. Something like this:

/- components   /- Card      /- CardLeftMedia.js      /- CardRightMedia.js      /- CardTopMedia.js

So, I need to import & export them in a index.js

On my Mackbook Air the default zsh is:

# use `zsh --version` to get this
zsh 5.3 (x86_64-apple-darwin18.0)

I installed the newer version from Homebrew:

brew install zsh

Although, Homebrew installed the newer version (which is 5.8), when I checked it, it was still 5.3.

Then, I tried the next…

I set up a React project by using webpack, but after setup when I ran the code webpack-dev-server --mode=development the app couldn’t work properly and throw the error: Error: Cannot find module 'webpack-cli/bin/config-yargs' .

After googling for a while, I found out the reason was the versions of these libraries — webpack , webpack-cli and webpack-dev-server — I used couldn’t work together. So I reinstall them and used the older versions which are:

"webpack": "^4.32.2",
"webpack-cli": "^3.3.2",
"webpack-dev-server": "^3.5.1"

And now my setup works as well as expected.

CY

Learning to be a full-stack developer.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store