Export encountered errors on following paths / next.js 프로젝트 빌드 과정에서 계속 에러를 내뿜던 현상

export를 하면서 에러에 직면했다는 메세지가 계속 떴음

> Build error occurred
Error: Export encountered errors on following paths:
        /dynamicSSG/[id]: /dynamicSSG/1
        /dynamicSSG/[id]: /dynamicSSG/2
        /dynamicSSG/[id]: /dynamicSSG/3
    at /Users/hongdakyung/my-app/node_modules/next/dist/export/index.js:415:19
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Span.traceAsyncFn (/Users/hongdakyung/my-app/node_modules/next/dist/trace/trace.js:79:20)
    at async /Users/hongdakyung/my-app/node_modules/next/dist/build/index.js:1400:21
    at async Span.traceAsyncFn (/Users/hongdakyung/my-app/node_modules/next/dist/trace/trace.js:79:20)
    at async /Users/hongdakyung/my-app/node_modules/next/dist/build/index.js:1259:17
    at async Span.traceAsyncFn (/Users/hongdakyung/my-app/node_modules/next/dist/trace/trace.js:79:20)
    at async Object.build [as default] (/Users/hongdakyung/my-app/node_modules/next/dist/build/index.js:66:29)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

 

 

[문제를 파악하기 위해서 이것저것 시도한 내 생각]

 

1. 혹싀, next는 폴더 기반 라우팅인데 저 폴더 이름을 'ssg' 라고 써야됐을까?

결론 : Nope!!!

왜?  폴더 이름 그대로인데 jsonplaceholder 서버로 요청보냈던 함수는 잘만 먹혀!!!

 

2. json-server 키는거 깜빡했네

결론 :  yes!!

왜? 내가 멍청햇어서!!!!!

 

3. 혹싀 휴먼에러가 있을까?

결론 : 세모

왜? 오타는 아니었고, 정답은 생각지 못한 곳에서 발견했기때문!!!!

---

[ 해결은 이렇게 했어요 ]

 

1. json-server를 안켰음

2. 설마했음!!!!!!!!!!!!

 

단 하나의 차이 , 나는 fetch에 넣는 url 부분 중에 틀린게 있나 검토하면서

"설마 http에 s 붙여진게 문제겠어?" 라는 생각을 하며 지나갔었다.

근데 그게 문제였다!!!!!!!!!

엄청난 나의 "잘못된 생각"을 발견했다

나는 단순히 HTTP와 HTTPS의 차이가 '보안'의 차이라고만 생각하고

(단순히 https로 요청하면 암호화된 데이터로 보안을 강화한다고 생각했던 것 같다)

 

HTTP로 요청하나 HTTPS로 요청하나 '형태만 다르지' 같은 곳으로 request를 날린다고 생각했는데...

( 왜냐면, 네이버 링크 칠때 https로 치나 http로 치나 동일한 페이지가 나오길래 )

너는 뭔데 , 그게 문제가 되지 않을거라고 확신했니.................

정확한 이해를 하지도 않은 상태였음에도 말이야!!!!!!!!!!!!!!!!!!!!!!! 조랑말이야!!!!!!!!!!!!!!(ㅎ)

 

 

그럼 왜 정상적으로 build가 되지 않았던 것인가?

바로바로!!!!

HTTP는 80번 포트를 사용하고 있고, 따라서 HTTP 서버가 80번 포트에서 요청을 기다리고 있다.
내가 요청을 하면 80번 포트로 요청을 보내게 되는 것
HTTPS는 HTTP와 다르게 443번 포트를 사용하고 있다.

포트 번호가 달랐기 때문!!!

 

도달하는 엔드포인트가 다르니 http로 서버를 띄우고 있던 json-server에는

https는 닿을 수가 없는 요청이었던 것!!!!

 

 

json-server 실행하고 터미널에 뜬 안내메세지

 

 

이건 수정된 (http로 수정한 거 밖에 없음) 나의 전체 코드

export async function getStaticProps(context: any) {
  const { id } = context.params;
  const response = await fetch(`http://localhost:3001/posts/${id}`);
  const post = await response.json();
  return {
    props: {
      post,
    },
  };
}