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: items.map(job => ({
      params: {
        id: String(item.id),
      },
    })),
    fallback: false,
  }
}

export async function getStaticProps({ params }) {
  const id = String(params.id)
  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 } }
}


This content originally appeared on flaviocopes.com and was authored by flaviocopes.com

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: items.map(job => ({
      params: {
        id: String(item.id),
      },
    })),
    fallback: false,
  }
}

export async function getStaticProps({ params }) {
  const id = String(params.id)
  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 } }
}


This content originally appeared on flaviocopes.com and was authored by flaviocopes.com


Print Share Comment Cite Upload Translate Updates
APA

flaviocopes.com | Sciencx (2021-06-28T05:00:00+00:00) How to parse Markdown in Next.js. Retrieved from https://www.scien.cx/2021/06/28/how-to-parse-markdown-in-next-js/

MLA
" » How to parse Markdown in Next.js." flaviocopes.com | Sciencx - Monday June 28, 2021, https://www.scien.cx/2021/06/28/how-to-parse-markdown-in-next-js/
HARVARD
flaviocopes.com | Sciencx Monday June 28, 2021 » How to parse Markdown in Next.js., viewed ,<https://www.scien.cx/2021/06/28/how-to-parse-markdown-in-next-js/>
VANCOUVER
flaviocopes.com | Sciencx - » How to parse Markdown in Next.js. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/06/28/how-to-parse-markdown-in-next-js/
CHICAGO
" » How to parse Markdown in Next.js." flaviocopes.com | Sciencx - Accessed . https://www.scien.cx/2021/06/28/how-to-parse-markdown-in-next-js/
IEEE
" » How to parse Markdown in Next.js." flaviocopes.com | Sciencx [Online]. Available: https://www.scien.cx/2021/06/28/how-to-parse-markdown-in-next-js/. [Accessed: ]
rf:citation
» How to parse Markdown in Next.js | flaviocopes.com | Sciencx | https://www.scien.cx/2021/06/28/how-to-parse-markdown-in-next-js/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.