我有一個包含 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 } }
}