Natik's Journal

Notes on engineering leadership and software development.

#contentlayer

Deep dives into Contentlayer and MDX for Next.js blogs. Tips, tricks, and custom plugins for enhanced markdown content management and rendering.

2025

2024

2023

  • Using Contentlayer with Next.js

    Contentlayer is the easiest way to setup markdown with mdx source to static website pipeline. Here's how it's implemented in respawn.io.

2022

  • New Site! Obsidian, Next.js, and Vercel

    I had a couple hours on a Thursday night, and wanted to clean up my website. The result is this: a blog built with Obsidian, Markdown, Next.js, Contentlayer, and a few hacks to glue things together.

Daily Notes

  • December 31st:

    TIL `npx concurrently`

    Was writing a few posts this week, and finally got tired of running contentlayer2 dev and next dev in two split panes.

    So, I added a new script to package.json:

    {
  "scripts": {
    "dev": "pnpm run contentlayer dev --parallel 'next dev'"
  }
}

    Was really tempting to bring Overmind from my Rails days, but this works.

  • November 19th:

    Daily TIL note from November 19th, 2023

    Contentlayer supports markdown and even MDX formatting in the frontmatter fields of your documents, as long as you specify the field type as mdx or markdown.

    The tricky part is that:

    • markdown fields give you raw HTML code. You'd have to wrap it in __dangerouslySetHTML or something.
    • mdx gives you the code that you have to pass into useMDXComponent to render.
    • Either way, you have to decide where to allow markdown formatting and where to strip it.

    I've just implemented it for the blog here:

    • Posts lists gets new PostDescription component that renders MDX-processed post description.
    • Post metadata and RSS gets raw description, implemented in a little custom field on Contentlayer that strips formatting.