500: INTERNAL_SERVER_ERROR / 미들웨어에서 파이어베이스 getDoc하는데 났던 에러 / 바셀에서 배포할때 겪은 현상

yarn build를 하고 yarn start로 실행을 했을때도 잘만 작동되었던 부분이

바셀에 배포한 후에, 미들웨어에 설정해주었던 페이지에서 아래와 같은 에러를 만났다. 

 

 

 

 

진짜 몇시간동안 구글링하고 공식문서도 뒤져보고 이것저것 코드 수정을 해보았는데

도저히 안되서 .... 튜터님한테도 여쭤봤었는데, 아무래도 파이어베이스 getDoc을 미들웨어에서 사용하면 안되는 건지

근본적인 원인을 찾지는 못했지만, 미들웨어에서 구현했던 로직을 해당 페이지의 getServerSideProps에서 실행시켜버리는 방법으로 대체를 시켰다.

 

넥스트 미들웨어에게 의문의 1패를 한 기분.....매우 지치고 아련터지지만 내일 체력보충해서 , 또 더 레벨업해서 다시 보면 언젠간 해결할 수 있다고 믿는당 

아래는 튜터님과 함께 해결한 다른 방편

export const getServerSideProps: GetServerSideProps = async (context) => {
  let targetWholeData;
  const { params, res } = context;
  const { id }: any = params;
  //페이지 해당 id
  const postId = id;
  const snap = await getDoc(doc(dbService, "recipe", postId));
  if (snap.exists()) {
    targetWholeData = snap.data();
  } else {
    console.log("가져올 문서가 없습니다.");
    res.setHeader("Location", "/deletePage");
    res.statusCode = 302;
    return { props: {} };
  }

  if (targetWholeData) {
    targetWholeData = JSON.parse(JSON.stringify(targetWholeData));
  }

  return {
    props: {
      targetWholeData: targetWholeData || null,
      postId: postId || null,
    },
  };
};