하려고 하는것 (요구사항)

• SSG를 활용하여,
• 유저가 url이 /posts/ssg-ssr 으로 접근하면, 폴더 구조 posts/ssg-ssr.md 파일을 읽어서 보여준다.
• 유저가 url이 /posts/pre-rendering 으로 접근하면, 폴더 구조 posts/pre-rendering.md 파일을 읽어서 보여준다.

해결 방법

• /posts/[slug].js 파일을 만들어서 url로 접근했을때 해당 내용을 보여 주면 되지 않을까?
• SSG를 이용해서 Dynamic한 페이지를 만들려면? getStaticPaths 를 이용한다.
• getStaticPaths는? SSG로 생성할 페이지의 정보들을 배열로 반환 해야한다.

큰 그림

• 그 포스트의 이름 === id를 모두 가져오는 함수 (getAllPostIds) ⇒ getStaticPaths 안에서 사용

• id를 가지고 포스트 내용을 가져오는 함수 (getPostData) ⇒ getStaticProps 안에서 사용

• getAllPostIds

  // /lib/posts
  export function getAllPostIds() {
    const fileNames = fs.readdirSync(postsDirectory);
  
    // Returns an array that looks like this:
  	// getAllPostIds가 실제로 return 하는 값
    // [
    //   {
    //     params: {
    //       id: 'ssg-ssr'
    //     }
    //   },
    //   {
    //     params: {
    //       id: 'pre-rendering'
    //     }
    //   }
    // ]
    return fileNames.map((fileName) => {
      return {
        params: {
          id: fileName.replace(/\\.md$/, ''),
        },
      };
    });
  }
  

  getStaticPaths() 안에서 getAllPostIds 실행

  // /pages/posts/[id].js
  
  // SSG에서 페이지 정보를 저장하는 함수
  export async function getStaticPaths() {
    // paths는 배열 형태로
    // paths = [ { params: { id: 'pre-rendering' } }, { params: { id: 'ssg-ssr' } } ]
    const paths = getAllPostIds();
    return {
      paths,
      fallback: false,
    };
  }
  

  • getPostData = id를 받아서 실제 postData를 조회 하는 함수

  // /lib/posts
  export async function getPostData(id) {
    const fullPath = path.join(postsDirectory, `${id}.md`);
    const fileContents = fs.readFileSync(fullPath, 'utf8');
  
    // Use gray-matter to parse the post metadata section
    const matterResult = matter(fileContents);
  
    // Use remark to convert markdown into HTML string
    const processedContent = await remark()
      .use(html)
      .process(matterResult.content);
    const contentHtml = processedContent.toString();
  
    // Combine the data with the id and contentHtml
    return {
      id,
      contentHtml,
      ...matterResult.data,
    };
  }
  

  getStaticProps() 안에서 getPostData 실행

  // /pages/posts/[id].js
  export async function getStaticProps({ params }) {
    console.log('params', params);
    const postData = await getPostData(params.id);
    return {
      props: {
        postData,
      },
    };
  }
  

결론

• getStaticPath를 가지고 id 목록을 배열로 가지고 왔고,
• getStaticProps로 실제 데이터를 가져와서 렌더링 해줬다.