Next.js 12 - getStaticProps, getStaticPaths

Next.js 12

 

✅ getStaticProps

---

getServerSideProps는 사용자가 요청할 때마다 실행됨.

getStaticProps는 빌드시에 딱 한 번만 실행되기 때문에 최신 데이터가 반영이 안 됨

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

export default Blog;

 

 

✅ getStaticPaths

---

getStaticProps를 사용하면서 동적 url을 사용해야 할 때 getStaticPaths가 필요하다

(Next.js에게 생성해야 하는 페이지의 수를 알려줘야 하기 때문)

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, data } = matter.read(`./posts/${ctx.params?.slug}.md`);
  const { value } = await unified()
    .use(remarkParse)
    .use(remarkHtml)
    .process(content);
  return {
    props: {
      data,
      post: value,
    },
  };
};

export default Post;