[Next.js] Render MarkDown

Render MarkDown

1️⃣ 마크다운 콘텐츠를 렌더링 하기 위해서는 remark 라이브러리를 사용합니다.

(터미널을 열고 아래와 같이 입력하여 설치합니다.)

$ npm install remark remark-html

 

2️⃣ lib/posts.js 최상단에 아래 코드를 삽입합니다.

import { remark } from 'remark'
import html from 'remark-html'

 

3️⃣ getPostData()를 아래와 같이 수정하여 remark 합니다.

 

여기서 중요한 점은

for을 사용 해야 하기 때문에 async 키워드를 추가 했습니다.

이를 통해 데이터를 비동기적으로 가져옵니다.

export async function getPostData(id) {
  const fullPath = path.join(postsDirectory, `${id}.md`)
  const fileContents = fs.readFileSync(fullPath, 'utf8')

  // Use gray-matter to parse the post metadata section
  const matterResult = matter(fileContents)

  // Use remark to convert markdown into HTML string
  const processedContent = await remark()
    .use(html)
    .process(matterResult.content)
  const contentHtml = processedContent.toString()

  // Combine the data with the id and contentHtml
  return {
    id,
    contentHtml,
    ...matterResult.data
  }
}

 

4️⃣ getPostData를 호출 할 때 await을 사용하려면

pages/posts/[id].js에서 getStaticProps를 아래와 같이 수정 해야 합니다.

export async function getStaticProps({ params }) {
  // Add the "await" keyword like this:
  const postData = await getPostData(params.id)
  // ...
}

 

5️⃣ 마지막으로 pages/posts/[id].js의 Post 구성 요소를

dangerouslySetInnerHTML을 사용도록 수정하여 ContentHTML을 렌더링 합니다.

export default function Post({ postData }) {
  return (
    <Layout>
      {postData.title}
      <br />
      {postData.id}
      <br />
      {postData.date}
      <br />
      <div dangerouslySetInnerHTML={{ __html: postData.contentHtml }} />
    </Layout>
  )
}

 

6️⃣ yarn dev 또는 npm run dev로 개발 서버를 구동하고

아래 페이지를 방문 해보면 아래와 같이 블로그 콘텐츠가 출력 되는 걸 볼 수 있습니다.

 

🥕 localhost:3000/posts/ssg-ssr

🥕 localhost:3000/posts/pre-rendering

---

Learn | Next.js