[NextJS] 마크다운으로 글 작성하는 방법

NextJS로 웹 사이트를 제작하여 운영하다 보면 단순한 글을 작성하기에는 html로 작성하는 것은 상당히 부담스러운 부분이 존재합니다. 템플릿 같은 틀이 정해져 있고 단순히 그 안에 콘텐츠만 많이 변경되는 형태라면 markdown을 이용하여 글을 작성하고 작성한 글을 템플릿에 맞게 렌더링해 콘텐츠를 보여주는 것이 더 좋은 방법일 수 있습니다.

 

 

이번 포스팅에서는 NextJS에서 markdown으로 작성한

콘텐츠를 보여주는 방법을 공유하도록 하겠습니다.

---

 

 

우선적으로 필요한 패키지를 설치하도록 합니다.

command 혹은 terminal

$ npm install --save raw-loader
$ npm install --save react-markdown

// npm을 이용하시면 위의 코드로
// yarn을 이용하시면 아래의 코드로 진행하시면 됩니다.

$ yarn add raw-loader
$ yarn add react-markdown

 

NextJS 프로젝트를 설정하는 next.config.js파일이 존재하지 않는다면 생성하고 아래의 코드를 넣어주시면 됩니다.

proejct/next.config.js

module.exports = {
  webpack: config => {
    config.module.rules.push(
      {
        test: /\.md$/,
        use: "raw-loader"
      }
    );
    return config
  }
};

 

만약, 기존에 next.config.js파일이 존재한다면,

아래의 코드를 rules에 아래의 코드를 webpack: 다음의 함수 내부에 추가하면 됩니다.

{
  test: /\.md$/,
  use: "raw-loader"
}

 

 

 

프로젝트 내의 원하는 디렉토리에 markdown으로 콘텐츠를 작성합니다.

project/contents/my_test.md

# This is Title

Markdown rocks!

 

콘텐츠를 적용할 페이지에 다음과 같은 방식으로 코드를 작성합니다.

project/pages/index.js

import React from "react";
import ReactMarkdown from "react-markdown";
import content from "../content/my_test.md";


export default () => {
  return (
  	<>
      <ReactMarkdown source={content}/>
    </>
  )
};

 

 

---

다른 포스팅

https://growd.tistory.com/75

Next JS 프로젝트에 Google Analytics 적용하는 방법

https://growd.tistory.com/74

생활코딩에서 배운 검색엔진 최적화의 기본 - 구글을 중심으로