Static Page

서버와 연동할 필요 없는 페이지, 이를 테면 FAQ 같은 페이지를 만들 때 getStaticProps()를 사용한다. 해당 함수는 렌더링 시 딱 한 번만 되며, 서버와 연동하였더라도 갱신된 내용을 표시하지 않는다.

getStaticProps

마크다운 파일을 읽어오는 정적 페이지를 구성한다면, 먼저 pages 디렉토리와 동위인 디렉토리를 만든다.

# directory tree
└ pages
  └ blog.js
└ blog
  └ 01-first-file.md

01-first-file.md 내용을 대충 채운다.

---
title: Welcome Everyone
date: 2022.02.02
category: thoughts
---

# Welcome everyone!

This is my first blog post!

Thank you for reading

인터페이스처럼 보이는 부분은 front matter이며, 마크다운에 대한 데이터를 제공한다.

import { readdirSync, readFileSync } from "fs";
import matter from "gray-matter";

const Blog = ({ posts }) => {
  return (
    <div>
      <h1>
        Latest Posts:
      </h1>
      {posts?.map((item, idx) => (
        <div key={idx}>
          <span>{item.title}</span>
          <div>
            <span>
              {item.date} / {item.category}
            </span>
          </div>
        </div>
      ))}
    </div>
  );
};

export default Blog;

export async function getStaticProps() {
  const posts = readdirSync("./blog").map((file) => {
    const content = readFileSync(`./blog/${file}`, "utf-8");
    return matter(content).data;
  });
  return {
    props: { posts },
  };
}

readdirSync와 readFileSync는 디렉토리와 파일을 읽는 node.js 함수이다.

matter는 마크다운의 front matter를 해석해주는 gray-matter가 제공한다. npm install --save gray-matter로 설치할 수 있다.

blog 디렉토리에 마크다운 문서를 추가 생성하는 것으로 정적 페이지를 편집할 수 있다.

참고
노마드 코더 - 캐럿마켓 클론코딩
Next.js Docs - getStaticProps
Node.js api - fs
gray-matter github