NextJs 13 App Router - Error occurred prerendering page. TypeError: fetch failed 에러 이유

 

에러가 나게 된 과정

 

MSW와 같이 사용하려는 목적으로 api/route.tsx를 통해 모킹 데이터를 내보내서 SSR(서버 사이드 렌더링)을 시도하였습니다.

 

Error occurred prerendering page.라는 에러가 나오게 되었고, 많은 인터넷 검색을 통해 이유를 알게 되었습니다

 

 

이유 

 

빌드 중에는 Next.js API 경로를 사용할 수 없습니다.  외부 url에서 데이터를 가져오십시오.

 

 

해결 방법

 

api/route.tsx를 통해 MSW와 같이 모킹 하여서 SSR을 할 수 없는 상황이었습니다. 그래서 외부 주소인 개발 서버의 api 주소를 통해 데이터를 가져와 보여주게 되었습니다

 

 

 

 

app/api/category/route.tsx

 

import { MOCK_CATEGORY_LIST } from '@mocks/categoryList';

export async function GET() {
  return Response.json(MOCK_CATEGORY_LIST);
}

 

 

 

 

NextJs 13 App Router - Error occurred prerendering page. TypeError: fetch failed