Skip to content

How to parse Markdown in Next.js

I had a field with markdown and I wanted to print it in a Next.js page.

I used marked, dompurify and jsdom. Here’s an example in a Next.js dynamic page, to render an item’s description.

Note that I had to call DOMPurify.sanitize() server-side, as it assumes we’re in a Node.js environment, so I put it into getStaticProps():

import { useState, useEffect } from 'react'
import Head from 'next/head'
import Link from 'next/link'
import { useRouter } from 'next/router'
import { getJob, getJobs } from 'lib/data.js'
import prisma from 'lib/prisma'
import marked from 'marked'
import createDOMPurify from 'dompurify'
import { JSDOM } from 'jsdom'

export default function Item({ item }) {
  return <p>{item.description}</p>

export async function getStaticPaths() { //data fetching
  const items = await getItems(prisma)

  return {
    paths: => ({
      params: {
        id: String(,
    fallback: false,

export async function getStaticProps({ params }) {
  const id = String(
  const item = await getItem(prisma, id) //unrelated

  const window = new JSDOM('').window
  const DOMPurify = createDOMPurify(window)
  item.description = DOMPurify.sanitize(marked(item.description))

  return { props: { item } }
→ Download my free Next.js Handbook!



You might be interested in those things I do:

  • Learn to code in THE VALLEY OF CODE, your your web development manual
  • Find a ton of Web Development projects to learn modern tech stacks in practice in THE VALLEY OF CODE PRO
  • I wrote 16 books for beginner software developers, DOWNLOAD THEM NOW
  • Every year I organize a hands-on cohort course coding BOOTCAMP to teach you how to build a complex, modern Web Application in practice (next edition February-March-April-May 2024)
  • Learn how to start a solopreneur business on the Internet with SOLO LAB (next edition in 2024)
  • Find me on X

Related posts that talk about next: