Build a blog using Contentlayer

Build a blog using Contentlayer

Contentlayer is a library that allows you to build a static website using data sources such as Markdown, MDX, JSON, YAML, or any custom format. It transforms your data into a content layer, which is a collection of typed data objects that you can query and render in your React components. On the other hand, MDX is a superset of Markdown that enables you to use JSX syntax and import React components directly into your Markdown files.

In this blog post, we'll explore how to build a blog using ContenlLayer and MDX, combining the benefits of both technologies to create a seamless content creation and rendering experience.

Install and configure Contentlayer

Instal Dependencies

Install the ContentLayer packages inside your Next.js project by running the following command in your terminal:

pnpm add contentlayer next-contentlayer

Configure next.config.js

Update the next.config.js file at your project's root to configure it to use ContentLayer:

import { createContentlayerPlugin } from 'next-contentlayer'
/** @type {import('next').NextConfig} */
const nextConfig = {}
const withContentlayer = createContentlayerPlugin({
  // Additional Contentlayer config options
export default withContentlayer(nextConfig)

Define Document Type

Next, define a document type for your MDX content. This will specify the name, content type, file path pattern, and fields of your MDX files. Create a contentlayer.config.js file and add the following code:

import { defineDocumentType, makeSource } from 'contentlayer/source-files'
export const Post = defineDocumentType(() => ({
  name: 'Post',
  filePathPattern: `blog/**/*.mdx`,
  contentType: 'mdx',
  fields: {
    title: {
      type: 'string',
      description: 'The title of the post',
      required: true,
    description: {
      type: 'string',
      description: 'The description of the post',
      required: false,
    date: {
      type: 'date',
      description: 'The publishing date of the post',
      required: true,
    image: {
      type: 'string',
export default makeSource({
  contentDirPath: './content',
  documentTypes: [Post],

Write your content

Create your MDX files in the content/blog folder, following the schema you defined in the previous step. For example, create a file named hello-world.mdx with the following content:

title: Hello World
description: Learn how to use ContentLayer to build a blog
image: /blog/blog-post-4.jpg
date: 2022-11-18
# Hello World
This is my first post using ContentLayer and MDX.
I can write Markdown and JSX in the same file.
<SomeComponent />

Create slug

To render a single post, create a file named app/blog/[...slug].ts with the following code:

import { allPosts } from 'contentlayer/generated'
export const generateStaticParams = async () => => ({ slug: post.url }))
export default function Post({ params }: { params: { slug: string } }) {
  const post = allPosts.find((post) => post.url === params.slug)
  if (!post) throw new Error(`Post not found for slug: ${params.slug}`)
  return (
      <div dangerouslySetInnerHTML={{ __html: post.body.html }} />

That's it! This blog post has provided you with an overview of how to build a blog using Contentlayer and written in MDX, leveraging their features to create a seamless content creation and rendering experience.

For more advanced topics, such as syntax highlighting and theming, you can refer to

Thank you for reading!