在Next.js中解析Markdown的方法

我有一个带markdown的字段，我想在Next.js页面中打印它。

我使用了 marked, dompurify和jsdom。下面是一个Next.js动态页面中的例子，用来渲染一个项目的描述。

请注意，我必须在服务器端调用DOMPurify.sanitize() ，因为它假定我们是在Node.js环境中，所以我把它放到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 } }
}