[ Next.js - DeepDive ] - Blog Section

우리가 물건 목록을 확인하는 홈페이지에 들어갔을 때, 시간이 어느정도는 걸립니다. 그 이유는 서버사이드 렌더링을 할 때, 시간이 어느정도 필요하기 떄문입니다. 이런건 정적 페이지라고 할 수 없습니다. 정적이라는 뜻은 데이터가 바뀌지 않는 것을 말합니다.

 

우리의 홈페이지는 동적 페이지입니다. 데이터가 바뀌기 떄문입니다. 그 변경되는 데이터는 API에서 올겁니다. 기본적으로 서버사이드렌더링을 하지 않거나, API에서 데이터를 가져오지 않을 때 그건 누구에게나 정적으로 보여집니다. 왜냐하면 말 그대로 NextJS가 사이트를 빌드할 때 해당 페이지를 export했기 떄문입니다.

 

NextJS는 페이지를 html로 export해줍니다. 그런데 정적 페이지를 만들고 싶지 않을수도 있고, 모든 정적 페이지에서 html을 쓰고 싶진 않을겁니다. 이렇게 하게되면 해당 웹 사이트의 정보는 데이터베이스에 존재 하지 않습니다. 모든 페이지들은 빌드될 때 생성 된것입니다.

 

다음 포스팅부터는 정적 페이지처럼 API코드가 없고, React state도 없지만 다른 종류의 데이터를 갖고 있는 페이지들을 어떻게 생성하는지 알아볼겁니다. 

 

/posts/01-first-post.md

# Welcome everyone!

THis is my first blog post!

Thank you for reading!

다음과 같은 포스트를 보겠습니다. 그리고 blog.tsx를 하나 만들도록 하겠습니다.

 

/pages/blog.tsx

import Layout from "@components/layout";

export default function Blog() {
  return (
    <Layout title="blog" seoTitle="Blog">
      <h1 className="text-lg font-semibold">Latest Post:</h1>
      <ul>
        <li>Welcome everyone!</li>
      </ul>
    </Layout>
  );
}

이렇게 하겠습니다. 여기에다 우리는 이전에만든 Markdown파일을 읽어서 가져오도록 할겁니다. 그리고 React컴포넌트는 읽을 수 없습니다. 왜냐하면 브라우저에서 이를 해석할 수 없기 떄문입니다. 그래서 getStaticProps를 사용해서 posts폴더의 내부를 들여다보고, 폴더 안에 있는 파일을 살펴서 해당 파일 안에 있는 모든것들을 빌드할겁니다. title을 추출하고, 아래에 있는 리스트 항목들을 빌드하는 겁니다.

 

그러면 웹사이트를 빌드할 때 Markdown파일이 html이 되는 겁니다.