[Next.js] api route는 build시 실행되지 않는다

프로젝트에서 ISR을 통해 정적 페이지를 뽑아내려고 하였다. 백엔드 로직을 /api 경로에 작성하여서 백엔드 서버를 따로두지 않고 풀스택으로 처리하고자 했다. 즉, db조회 후 데이터를 꺼내는 로직을 api route에 작성하여 프론트에서 "/" 이렇게 상대경로로 요청을 보내는 것이다.

Dynamic Routing이 필요한 페이지에 ISR을 적용하기 위해, getStaticPaths와 getStaticProps를 모두 작성할 필요가 있었다.

첫째로 현재 dynamic Routing이 가능한 포스트의 id값을 모두 뽑아, 존재하지 않는 id값에 대한 요청은 404 페이지를 반환하기 위해 다음과 같이 작업하였다.

export const getStaticPaths = async () => {
  const data = await axios.get('/api/product_list')

  const paths = data?.data?.product.map((item) => ({
    params: { id: item.PR_ID_PK },
  }))

  return {
    paths,
    fallback: false,
  }
}

미리 /api/product_list 경로로 로직을 짜놓았었고, dev 모드에서는 잘만 받아와졌기 때문에 큰 이상이 없으리라 생각하였다. 하지만 계속 다음과 같은 에러를 뱉었다.

AxiosError: connect ECONNREFUSED ::1:80

구글링해보니 getStaticPaths, getStaticProps를 사용하는 곳에 직접적으로 serverside 코드를 넣으라고 하였다. (참고)

처음엔 무슨 소리인가 싶었는데 밑에 있는 댓글을 보니 아차 싶었다.

During the build, there is no server running.

즉, 빌드 타임에는 Next.js 서버가 동작하지 않는다는 의미였다. Next.js는 백엔드 프레임워크라고 불리는 이유가, Node.js 상에서 프론트/백엔드 로직을 모두 작성하는 공간이기 때문이다.

즉, /api 경로에 작성하여 요청을 보내기 위해선, server 자체가 열려있어야 함을 의미한다. 하지만 build 시에는 server가 꺼져있기 때문에 요청이 불가하므로 /api 경로에 적어놓은 로직들을 바로 넣으라는 의미였다. 서버가 꺼져있으니, Node.js 상에서는 도메인이 어디인지 확인 불가능한 상태인 것이다.

export const getStaticPaths = async () => {
  const PRODUCT_TB = db.PRODUCT_TB

  const product = await PRODUCT_TB.findAll({
    attributes: ['PR_ID_PK', 'PR_NAME'],
  })

  const paths = product?.map((item) => ({
    params: { id: item.dataValues.PR_ID_PK.toString() },
  }))

  console.log(paths)

  return {
    paths,
    fallback: false,
  }
}

이렇게 로직을 수정하니 데이터가 잘 가져왔다. 뿌듯 :)