[food-app] next.js에서 getStaticProps 사용 하다가 마주친 에러

 

에러 발생 상황

data.json파일을 직접 import하는 방법 대신 서버에 요청해서 받아오려고 코드를 수정했다. next.js에서 getStaticProps를 사용해서 데이터를 받아오기 위해 아래와 같이 코드를 작성했다.

export async function getStaticProps() {
  const stores = await fetch(
    ${process.env.NEXT_PUBLIC_API_URL}/api/store
  ).then((res) => res);

  return {
    props: { stores },
    revalidate: 60 * 60,
  };
}

에러 원인

데이터를 받아서 json으로 바꿔주는 작업을 하지 않아서 데이터를 인식할 수 없었던 것이었다. 그래서 json으로 바꿔주는 메서드를 뒤에 추가했다.

.then((res) => res.json())

 

근데 여전히 문제가 해결되지 않았다. 에러 메세지는 반복해서 나왔다.

SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON

 

그러니까 데이터가 json 형태가 아니라는 건데 뭘 잘못 입력했는지 한참을 찾아 헤메었다. 그리고 나서 깨달았다. 환경 변수에 오타가 있었다는 것을.. 그걸 30분을 헤메고 찾았다. 허탈했지만 그래도 덕분에 getStaticProps의 동작을 좀 더 자세하게 알게 되었다.

결론

생각보다 더 많이 오타가 생겼고 그걸로 삽질을 여러번 했는데 너무 그냥 오타여서 트러블슈팅이라고 올릴 수 없었다.. 하지만 이번에는 데이터 타입을 json으로 바꿔주는 작업을 꼭 해야 했다는 중요한 교훈을 얻었기 때문에 블로그 글로 남기는게 좋을 것 같다는 생각을 하게 되었다. 이렇게 블로그 글을 간단하게 써도 되나 싶지만 일단 기록 해두는게 중요하니까..!