서버와 연동할 필요 없는 페이지, 이를 테면 FAQ 같은 페이지를 만들 때 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