/

如何在 Next.js 中解析 Markdown

如何在 Next.js 中解析 Markdown

我有一個包含 Markdown 內容的欄位，然後我想在 Next.js 的頁面上將其顯示出來。

我使用了 marked、dompurify 和 jsdom 。以下是一個在 Next.js 的動態頁面中用於渲染項目描述的示例。

請注意，由於 DOMPurify.sanitize() 需要在伺服器端調用，因為它假設我們在 Node.js 環境中，所以我將它放在 getStaticProps() 中：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
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 } }
}

tags: [“Next.js”, “Markdown”, “marked”, “dompurify”, “jsdom”]