nextjs contentful

nextjs로 블로그를 만드는 중인데 블로그 post를 contentful 로 작성하고 그 데이터를 읽어오는 방식으로 방향을 잡았다.

contentful을 사용하면 crud를 편하게 할 수 있다. 개인 블로그이니 나만 CUD를 할 수 있으면 되기 때문에 따로 작성페이지, 수정, 삭제를 만들 필요 없이 contentful 에서 작성, 수정, 삭제를 하면된다.

markdown

contentful 에서 markdown으로 글을 작성하고 그 글을 blog에 보여 줘야한다.

하지만 글의 내용을 그대로 보여주면 html형태인 글이 html태그까지 text로 보여지게된다.
이 부분을 수정하기위해 검색을 시작했고 remark라는 라이러리를 알게 되었다.

완벽하게 이해한건아니지만 remark, remark-react라는 라이브러리가 string형태로 들어오는 content를 react element로 바꿔준다.

remark

1. 의존성 설치

npm install remark remark-react 

2. 마크다운 파싱을 위한 유틸함수 생성

import { unified } from 'unified';
import remarkParse from 'remark-parse';
import remarkReact from 'remark-react';
import React from 'react';

export default function parseMarkdown(markdown: string) {
  return unified()
    .use(remarkParse)
    .use(remarkReact as any, { createElement: React.createElement })
    .processSync(markdown).result as React.ReactNode;
}

의존성 설치와 유틸 함수를 생성하고 content를 사용하는 부분에서 parseMarkdown(content); 를 호출하면 text가 react component또는 html로 변환이 가능하다.