[Next.js] getStaticPath 사용

이번 페이지는 어제 발견했던 getStaticPath에 대한 내용을 다룰 것임.

getStaticPath

빌드 타임에 Static Page 생성

api 경로에 따라 데이터는 달라지지만 내용이 자주 바뀌지 않는 페이지에 유용 → 세션 디테일 페이지에 적합

반드시 getStaticProps와 함께 사용해야됨.

외부 데이터로 받아올 동적 path의 목록들을 getStaticPaths를 활용해서 받아오고 getStaticProps에게 전달하여 Static Page를 만드는 방식이다.

첫 시도는 다음 코드로 해봄

export async function getStaticPaths() {
  const res = await axios.get(`https://wing-homepage.vercel.app/api/sessions`);
  const allPostsData = await res.data;
  const paths = allPostsData.map((post: any) => ({
    params: {
      id: post.id,
    },
  }));

  return {
    paths,
    fallback: false,
  };
}

export const getStaticProps = async ({ query }: any) => {
  const id = query?.id as string;
  const res = await axios.get(`https://페이지Url/api/sessions/${id}`);
  const session_data = res.data;
  return { props: { session_data } };
};

getStaticPaths에서 params에 전달해준 값에 id: ~~ 이런식으로 작성해준 이유는 파일 이름이 [id].tsx이기 때문이다.

fallback?

fallback을 false로 설정해두면 만약 만들어지지 않은 Static Path로 접속했을 때 404페이지를 보여주게 된다.

만약 fallback을 ture로 설정한다면 페이지를 render하는 함수 내부에서 fallback이 true인지 한 번 검증해주어야 한다.

홈페이지에 사용된 코드는 아니지만 이런식으로 하면 된다고 한다.(fallback이 true일 때)

function PostDetail({ postData }: Props) {
  const { isFallback } = useRouter();

  // If the page is not yet generated, this will be displayed
  // initially until getStaticProps() finishes running
  if (isFallback) {
    return <div>Loading...</div>;
  }

  const { userId, title, body } = postData;

  return (
    <ul>
      <Post userId={userId} title={title} body={body} />
    </ul>
  );

Issue 1 : 왜 빌드가 안될까?

저 위에 있는 코드로 Static 페이지를 만들고 빌드를 해보았다.

그런데 자꾸 페이지 생성에 문제가 있다는 에러가 떴다.

에러 메세지를 잘 읽어본 결과 axios로 데이터 fetching하는 부분에서 에러가 발생한 것이었고, 에러 코드는 404였다.

api 주소에는 문제가 없어보였는데 안되길래 이것저것 테스트 해봄.

근데 어이없는 실수로 에러가 떴다는 것을 깨달아버림.

api 주소를 잘못입력함.

내가 입력한 api 주소

https://페이지Url/api/sessions/${id}

맞는 api 주소

https://페이지Url/api/sessions?order=${id}

해결 완료.

Issue 2 : 로컬에서는 getStaticPaths 기능을 사용할 수 없을까?

빌드 후 배포한 프로젝트에서는 dynamic routing를 통해 static 페이지에 접속이 되는 것을 확인했는데, 로컬에서는 아예 그 주소로 접속이 안됨.

getStaticPaths는 빌드될 때 실행된다 → 로컬에서도 npm run build로 빌드 과정을 거쳐야만 해당 페이지가 미리 만들어진다!