Building Better Next.js Static Sites With MDX and Contentlayer

Publishing static content becomes so effortless with MDX and Contentlayer. I’ll show you how

TL;DR

• 💨 Contentlayer reduces a lot of friction in publishing the content on my static website.
• 😍 MDX with remark and rehype plugins is awesomely convenient and powerful.
• 🍵 Next.js jells very well with Contentlayer and MDX

I fully embraced Static Site Generation (SSG) for my website to optimize the site speed and scaling in the future.

Recently I’ve been researching on reducing the effort to create a new article on my website. There were many touchpoints in my Next.js project setup in order to:

• publish a new article
• estimate reading time
• update the list of articles
• create a new RSS feed
• update sitemap

What Was The Problem?

I analyzed a little more and found out the friction was in my MDX usage. My file structure looked like this:

my-blog
├── public
├── data
│   └── blogs.json
├── components
│   └── Blog.tsx
└── pages
    ├── blogs
    │   ├── blog-one.mdx
    │   ├── blog-two.mdx
    │   └── blog-three.mdx
    └── index.tsx

It is the standard setup recommended by Next.js. I was using @mdx-js/loader and @next/mdx to transform MDX into pages.

Take pages/blogs/blog-one.mdx for example, the content looked like this:

blog-one.mdx named-exported a meta data. It was picked up by the the default component that took care of the layout and rendered the meta data.

The <Blog /> component looked like this: