[ Next.js - DeepDive ] - getStaticProps part One

이제 우리는 이전에 getStaticProps로 만든 SSG페이지를 업그레이드 시켜보겠습니다. 왜냐면 우리는, 일반적인 HTML이 되는 이런 static페이지를 생성합니다. 하지만 우리는 이번에 각 블로그마다 다른 경로인 예를 들어 /blog, /blog/01-my-first-post, /blog/02-back-home,...이렇게 말이죠. 

 

이는 기존에 만든 products페이지와 매우 비슷합니다. 다만 이번에 만드는 blog는 모든 데이터를 이미 가지고 있는 페이지가 될 거라는 것입니다. 이를 하기 위해서 우선 기존의 blog.tsx를 /blog폴더로 옮겨줍니다.

 

/pages/blog/index.tsx

import Layout from "@components/layout";
import { readdirSync, readFileSync } from "fs";
import matter from "gray-matter";
import { NextPage } from "next";
import Link from "next/link";

interface Post {
  title: string;
  date: string;
  category: string;
  slug: string;
}

const Blog: NextPage<{ posts: Post[] }> = ({ posts }) => {
  return (
    <Layout title="bloNextPage" seoTitle="Blog">
      <h1 className="mb-10 mt-5 text-center text-lg font-semibold">
        Latest Post:
      </h1>
      <ul>
        {posts.map((post, index) => (
          <div key={index} className="mb-5">
            <Link href={`/blog/${post.slug}`}>
              <a>
                <span className="text-lg text-red-500">
                  {post.title}
                </span>
                <div>
                  <span>
                    {post.date} / {post.category}
                  </span>
                </div>
              </a>
            </Link>
          </div>
        ))}
      </ul>
    </Layout>
  );
};

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 };
  });
  console.log(blogPosts);
  return {
    props: {
      posts: blogPosts.reverse(),
    },
  };
}

export default Blog;

 

/pages/blog/[slug].tsx

import { NextPage } from "next";

const Post: NextPage = () => {
  return <h1>hi</h1>;
};

export default Post;

export async function getStaticProps() {
  return {
    props: {},
  };
}

 

이렇게 상세페이지를 위한 dynamic페이지도 만들어 주었습니다. 다만 이렇게 하게된다면, 

다음과 같이, 클릭해서 상세 블로그 페이지로 들어가게 되면

다음과 같은 이상한 오류가 나게됩니다. 이 에러는 getStaticPaths가 요구된다고 계속 말하고 있습니다. 이게 필요한 이유는 nextjs는 알아야 하기 때문입니다. 우리가 얼마나 많은 페이지를 빌드할 것인지를 말입니다. 보시다 싶이 페이지는 변수로 되어 있습니다. Nextjs가 아는 한, 페이지는 blog/1, blog/124124, blog/324020, ... 와 같이 무한한 페이지가 가능하기 때문입니다

 

이는 동적인 페이지인 /product/1와 같은 곳에서는 가능합니다. 데이터베이스에서 찾아보고 데이터가 없으면 NotFound를 보여주면 되기 때문입니다. 근데 이 Static(정적)페이지의 경우에는, 우리가 빌드하고 싶은 이 페이지가 한정되어 있지 않습니다. 

 

그래서 nextjs는, 몇 개의 페이지를 생성해야 하는지 알아야 합니다. 다음 포스팅때 이를 해결해 보도록 하겠습니다.