[ Next.js - DeepDive ] - Dynamic getStaticProps

이제는 md파일을 본격적으로 html파일로 변환해서 진짜로 화면에 띄워보도록 하겠습니다. innerHTML작업은 다음에 해보도록 하겠습니다. md -> html은 아래 npm패키지를 참고했습니다.

https://www.npmjs.com/package/remark-html

remark-html

 

/pages/blog/[slug].tsx

import { GetStaticProps, NextPage } from "next";
import { readdirSync } from "fs";
import matter from "gray-matter";
import { unified } from "unified";
import remarkParse from "remark-parse";
import remarkHtml from "remark-html";

const Post: NextPage<{ post: string }> = ({ post }) => {
  return <h1>{post}</h1>;
};

export default Post;

export function getStaticPaths() {
  const files = readdirSync("./posts").map((file) => {
    const [name, _] = file.split(".");
    return { params: { slug: name } };
  });

  return {
    paths: files,
    fallback: false,
  };
}

export const getStaticProps: GetStaticProps = async (ctx) => {
  const { content } = matter.read(
    `./posts/${ctx.params?.slug}.md`
  );
  console.log(content);

  const { value } = await unified()
    .use(remarkParse)
    .use(remarkHtml)
    .process(content);

  return {
    props: {
      post: value,
    },
  };
};

제가 한번 찍어봤더니 getStaticProps의 ctx에 각각의 페이지를 SSG로 만들기 위한 [slug]변수의 값이 들어있었습니다. 이는 getStaticPaths에서 paths에서 주어진 값입니다.

서버에서 value의 값을 찍어보니 md가 잘 html로 변환된 것을 확인해볼 수 있었습니다.

 

그리고 이 value값을 post를 키값으로 해주어 넘겨주었습니다. 그리고 Post컴포넌트에서 이를 렌더링했더니 아래와 같이 되었습니다.

getStaticProps는 NextJS가 production하기 위해서 프로젝트를 빌드할 때 호출됩니다. 그리고 여기로 리턴되는 모든 Paths는 딱 한번만 호출됩니다. 이제 다음부터는 ISR이라는 멋진 개념과 위와같이 못생기게 생기게 하는 것을 고쳐보도록 하겠습니다.