[Next.js] getStaticPaths 함수 내부에서 Data Fetching

Issue : getStaticPaths 함수 내부에서 data fetching 안됨

getStaticPaths는 기본적으로 paths: [], fallback: “” 형식의 데이터를 e

나같은 경우는 모든 session data에 해당하는 id값을 불러오고 그 id 데이터를 paths에 넣어서 return하는 방식을 사용해야했다.

불러온 데이터를 바탕으로 리턴해주는 부분을 구현하기 전에 일단 그냥 값을 입력해줬을 때 잘 빌드가 되는지 확인해보았다.

export async function getStaticPaths() {
  return {
    paths: [{ params: { id: "1" } }, { params: { id: "2" } }],
    formData,
    fallback: false,
  };

이런식으로 코드를 짰더니 빌드 시 sessions/1, sessions/2 페이지가 아주 잘 만들어지는 것을 확인할 수 있었다.

그럼 fetching한 데이터를 리턴값에 넣어보자.

export async function getStaticPaths() {
  const res = await axios.get(`https://페이지Url/api/sessions`);
  const allPostsData = res.data;
  const paths = allPostsData.map((post: any) => ({
    params: {
      id: post.id,
    },
  }));

  return {
    paths: paths,
    fallback: false,
  };

이렇게 했더니 어째서인지 build 시에 에러 지옥에 갖혀버렸다.

아마 paths 안에 들어간 데이터 형식이 잘못되지 않았나 싶다.

그래서 이런 식으로 코드를 수정해보았다.

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

  return {
    formData,
    fallback: false,
  };

이렇게 해도 빌드 때 에러가 났다.

아마 return 값에 paths: ~~, fallback: ~~ 이런식으로 넣어줘야되지 않나 싶다.

export async function getStaticPaths() {
  const res = await axios.get(`https://페이지Url/api/sessions`);
  const allPostsData = res.data;
  const formData: { paths: { params: { id: string } }[] } = {
    paths: allPostsData.map((post: { id: any }): any => ({ params: { id: String(post.id) } })),
  };

  return {
    paths: formData.paths,
    fallback: false,
  };

이런 식으로 수정해주었더니 일단 로컬에서는 잘 빌드가 된다.

🥳