Next.js 기본 사용법(5) - Data Fetching | process.cwd()

이전 포스트 getStaticProps에 이어서 파일 시스템에서 직접 읽는 방법인 process.cwd()를 알아본다.

그러기 위해서는 파일의 전체 경로를 가져와야 한다.

Next.js는 코드를 별도의 디렉토리로 컴파일하므로 '__dirname'은 실제 페이지 디렉토리 경로와 다른 값을 반환하기 때문에 사용할 수 없다.

 

이 때, 사용하는 것이 process.cwd() 이다.

 

1. index.js 수정

// index.js

import { promises as fs } from "fs";
import path from "path";

function Blog({ posts }) {
  console.log(posts);
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>
          <h3>{post.filename}</h3>
          <p>{post.content}</p>
        </li>
      ))}
    </ul>
  );
}

export async function getStaticProps() {
  const postsDirectory = path.join(process.cwd(), "posts");
  const filenames = await fs.readdir(postsDirectory);

  const posts = filenames.map(async (filename) => {
    const filePath = path.join(postsDirectory, filename);
    const fileContents = await fs.readFile(filePath, "utf8");

    return {
      filename,
      content: fileContents,
    };
  });

  return {
    props: {
      posts: await Promise.all(posts),
    },
  };
}

export default Blog;

 

2. txt 파일 생성

root 디렉토리에 hello.txt 파일을 생성한다.

// hello.txt

crunky

 

이제 실행 해보면 아래 화면을 확인할 수 있다.

 

---

다음 포스트에서는 getStaticPaths 에 대해 알아본다.