[Next.js] 에러 기록 - getServerSideProps Export Error (w/ ⭐️Pre-rendering⭐️)

개인 프로젝트를 배포하는 과정에서 발생한 오류로 인해 Pre-rendering의 개념을 다시 짚어보았다.

📌 바로 Pre-rendering error

Error occurred prerendering page

📖 Next.js의 Pre-rendering

Pre-rendering

Pre-rendering은 Next.js의 아주 중요한 개념 중 하나이다. Pre-rendering은 Next.js가 JS로 만들어진 페이지를 보여주기 전 미리 각 페이지의 HTML 파일을 미리 만들어서 보여주는 것을 의미한다. 반면, 순수 리액트를 사용했을 때는 Pre-rendering 기능을 제공하지 않기 때문에 사용자는 JS 파일로 된 파일을 다 불러올 때까지 빈 화면을 보게 되는 불편함이 있다. (Client-Side Rendering)

Pre-rendering의 종류

• Static Generation은 Build시 HTML파일을 생성한다. 사용자가 페이지 전환 시 미리 만들어진 HTML파일을 보여주고 다음에 재사용한다. (퍼포먼스 이유로, next js는 정적 생성을 권고)
• Server-side Rendering은 사용자의 요청이 있을 때 HTML파일을 생성해서 보여준다. (항상 최신 상태를 유지해야 하는 페이지에 사용)

---

🔨 Error 해결하기(error message)

에러 머시지 #1

Error occurred prerendering page "/view/[mediaType]/[type]". Read more: https://nextjs.org/docs/messages/prerender-error

첫번째 에러 메시지는 Pre-rendering을 하는 과정에서 발생한 에러에 대한 해결 방법을 제시해 준다. 하지만 하단의 방법대로 해봤지만 해결하지 못했다.
해당링크로 이동하기

에러 머시지 #2

Error: Error for page /view/[mediaType]/[type]: pages with `getServerSideProps` can not be exported. See more info here: https://nextjs.org/docs/messages/gssp-export

두번째 에러 메시지는 getServersideProps를 Build 하는 과정에서 export에 실패했다고 뜬다. 해당 공식문서에 가보니 package.json파일에 build 명령어를 update하라고 한다.

해당 링크로 이동하기

기존 코드

{
  "scripts": {
    "dev": "next dev",
    "build": "next build && next export",
    "build:dev": "env-cmd -f .env.dev next build",
    "build:local": "env-cmd -f .env.local next build",
    "build:prod": "env-cmd -f .env.prod next build",
    "start": "next start",
    "lint": "next lint"
  },
}

수정 후 코드

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "build:dev": "env-cmd -f .env.dev next build",
    "build:local": "env-cmd -f .env.local next build",
    "build:prod": "env-cmd -f .env.prod next build",
    "start": "next start",
    "lint": "next lint"
  },
}

next export 때문에 발생한 에러였다 (next export는 정적 페이지를 내보내는 명령어). getStaticProps를 사용한다면 문제가 없지만, 해당 페이지는 getServerSideProps를 사용한다.
(📌 공식문서에도 나와있듯이 export를 지운다고 해도 정적페이지 내보내기를 하지 못하는 것은 아니다. getStaticProps를 사용하는 페이지는 알아서 정적페이지로 export해주기 때문!)

---

Build 성공!