[Next.js] nextjs build 시 TypeError fetch failed 발생

 

build 시 계속 위와같은 에러가 발생
로컬에서는 잘만되는데 서버에 올려서 build 만 하면 저렇게 떴다
처음에는 도대체 api 부분에 뭐가 문제여서 저러는지 이해가 안됐다

Error occurred prerendering page "/api/getpre". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: fetch failed
    at Object.fetch (node:internal/deps/undici/undici:11372:11)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

   Generating static pages (64/86) 
 ⚠ Entire page /wonderpass deopted into client-side rendering. https://nextjs.org/docs/messages/deopted-into-client-rendering /wonderpass
 ⚠ Entire page /wonderpass/testb4release deopted into client-side rendering. https://nextjs.org/docs/messages/deopted-into-client-rendering /wonderpass/testb4release


> Export encountered errors on following paths:
	/api/getpre/route: /api/getpre
 ✓ Generating static pages (86/86) 
Error: Process completed with exit code 1.

/api/getpre/route 파일의 내용을 아래와 같이 dynamic 부분을 추가 해줘서 강제로 동적 페이지로 설정하여 빌드시 나오는 에러를 해결 할 수는 있었는데

import { NextResponse } from "next/server";

//dynamic 추가
export const dynamic = "force-dynamic";

export async function GET() {
  const href = `${process.env.API_URL}/getApi`;  

  const res = await fetch(href, { cache: "no-store" });
  const data = await res.json();
  return NextResponse.json(data);
}

나중에 다른 기능들 테스트 하면서 보니, 애초에 백단 API 에 접근자체를 못해서 문제가 있었던거고, 로컬에서 잘됐던 이유는 .env 를 gitignore 에 추가해놓다보니 로컬전용 env 와 , 서버전용 env 가 달라서 잘됐던거였다. (로컬 env 쪽 API URL 은 옛날 링크 잘됐음) 

원인은 허무하게도 백단 URL 쪽 인스턴스 방화벽 (인바운드,아웃바운드쪽) 문제였고 Allow 해줌으로써 해결됐다
백단 API 접근 잘되는거 확인되어서 혹시나 싶어서 dynamic 부분 주석처리하고 다시 빌드해보니 지금 잘된다.

사실 지금도 이해가 잘 안가는게, build 할때 fetch 하는 부분을 한번씩 불러봐서 fetch Error 가 뜬건가? 싶기도하고
그리고 fetch 하는 api 부분이 저기만 있는게 아니고 수십곳가 있는데 다른곳에선 왜 에러가 안났을까?

마지막으로 동적페이지 설정으로 잘됐던것도 , 동적페이지가 HTML 에 데이터를 추가,가공해서 보여주는건데 데이터를 애초에 못불러왔으니 정적 페이지로 설정해야 됐던거 아닌가 싶은데 왜 동적 페이지로 설정했을때 잘됐는지도 의문이다-0-

---

혼틈 개념정리
고정되서 안움직이는 (고)정적 페이지
유동적으로 움직이며 변경되서 보이는 (유)동적 페이지