Recently, I'm rebuilding my personal blog using Next.js. I'm almost down except for the content management part. Using MDX or headless CMS? That's a question.
After trying both of them, I prefer to use MDX instead of headless CMS. Because I don't like spending too much time to learn how to use a platform.
I had tried @next/mdx
, next-mdx-remote
and Contentlayer to integrate MDX with my Next.js blog and summarized their differences.
In the beginning, I used @next/mdx
to render MDX posts.
It can be setup easily on my Next.js project with following the official docs and blog.
However, there are some drawbacks in this solution:
@next/mdx
does not support YAML front matter by default. You have to add frontmatter parser yourself, such as gray-matter
.@next/mdx
can only render MDX files locally, not using the remote files source including other Git repositories, databases, APIs or anywhere else.The default rendering mode of MDX files using @next/mdx
is Static Site Generation (SSG) in Next.js. We can see that by running the official example, with-mdx
.
next-mdx-remote
is a set of utilities to help work with MDX in Next.js projects.
Comparing with@next/mdx
, there are some differences between the two.
next-mdx-remote
allow content to be loaded from anywhere, rather than only in local Next.js project.next-mdx-remote
can be loaded with getStaticProps
or getServerSideProps
and hydrated correctly on the client.However, next-mdx-remote
and @next/mdx
does not handle loading content from sources,
which means you have to do loading MDX files, generating JSON data that contains content, metadata, etc, and passing these as props
into page components, by yourself.
Contentlayer is a content SDK that validates and transforms your content into type-safe JSON data you can easily import into your application's pages.
Here are some things that Contentlayer can do but @next/mdx
and next-mdx-remote
cannot:
Comparing three popular ways of using MDX with Next.js, I chose Contentlayer as content management tool finally.
Following this article, Create a Next.js App with Tailwind CSS, to create new Next.js project and add Tailwind to it.
Following this tutorial, you can build a simple Next.js blog site using Contentlayer.
Now this blog had integrated with Contentlayer already, you can refer to the source code if you like.