[ Next.js - DeepDive ] - getStaticProps part Two

이제 간단히 이전에 봉착했던 문제를 해결하기 위해 getStaticProps를 사용해 변수가 들어간 페이지에서 SSG를 어떻게 미리 Html파일로 만드는지 알아보도록 하겠습니다.

https://nextjs.org/docs/basic-features/data-fetching/get-static-paths

Data Fetching: getStaticPaths | Next.js

위 공식문서를 기반으로 간단히 작성해 보았습니다.

 

/pages/blog/[slug].tsx

import { NextPage } from "next";
import { readdirSync } from "fs";

const Post: NextPage = () => {
  return <h1>hi</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 async function getStaticProps() {
  return {
    props: {},
  };
}

이렇게 getStaticPaths를 만들어서 모든 posts폴더의 모든 항목들을 통해 slug에 대응되게 형식에 맞게 배열로 만들어서 getStaticProps에 넘겨주었습니다.

다음과 같이 이번에는 오류가 나지 않습니다. 그리고 이제 npm run build를 해보겠습니다.

이렇게, SSG로 우리가 목표했던 포스팅 이름에 따라 html페이지를 만든것을 보실 수 있습니다.

다음과 같이 빌드 결과에 잘 있는 것을 보실 수 있습니다. 다음에는 이제 진짜 포스팅 데이터를 가져와서 이를 완성해 보도록 하겠습니다.