Next.js에서 "document is not defined"라고 분노했을 때의 대처법

Next.js를 사용하면 다양한 오류가 발생합니다. 그 중에서도

document is not defined

window is not defined

이러한 오류는 잘 볼 수 있으므로 해결 방법을 설명합니다.
오류 화면은 다음과 같습니다.

문서의 정의되지 않은 오류를 해결하는 방법

"document is not defined"를 해결하는 방법에는 두 가지가 있습니다.

1.document의 정의 판정

첫 번째는 전역 변수에 문서가 있는지 여부를 판단합니다.document 가 정의되어 있는 경우에만 프로그램을 실행하므로 if (typeof document !== 'undefined') {} 로 옵니다. 이번 프로그램에서는 document 객체를 사용하여 쿠키에 값을 설정합니다.

index.jsx

export default function Index() {
  //document変数が定義されているときのみ
  if (typeof document !== 'undefined') {
    //クッキーに値をセット
    document.cookie = "クッキー";
  }

  return (
    <div style={{textAlign: "center", marginTop: "50px"}}>
      {/* 値の表示 */}
      <h1>値：{typeof document !== 'undefined'?document.cookie:""}</h1>
    </div>
  )
}

2. 브라우저 실행 판정

두 번째 방법은 브라우저에서 작동하는지 여부를 결정하는 것입니다. 브라우저에서 실행 중일 때만 document 를 사용하여 작업을 수행합니다. process.browser 가 true 의 경우는 브라우저로 움직이고 있는 증거입니다. 한편, undefined 의 경우는 서버에서의 실행이 됩니다.

index.jsx

export default function Index() {
  //ブラウザ実行時のみ
  if (process.browser) {
    //クッキーに値をセット
    document.cookie = "クッキー";
  }

  return (
    <div style={{textAlign: "center", marginTop: "50px"}}>
      {/* 値の表示 */}
      <h1>値：{process.browser?document.cookie:""}</h1>
    </div>
  )
}

왜 "문서가 정의되지 않았습니다!"라고 화가 났습니까?

왜 document 이나 window 가 정의되어 있지 않으면 분노하고 있는가 하면 서버측에서 브라우저용의 글로벌 변수를 사용하려고 하기 때문입니다.

Next.js는 서버측, 클라이언트측 모두에서 움직이는 프레임워크. 따라서 정의한 소스는 서버와 브라우저 모두에서 실행됩니다.

그리고 document 와 window 는 클라이언트만으로 정의되고 있는 글로벌 변수입니다. 서버 환경에서 이동하려고 하면 "그런 전역 변수는 정의되지 않았습니다!"오류가 발생합니다.

그래서 if (process.browser) 로 브라우저만의 판정을 넣으면 서버 환경에서의 실행시에는 무시되어 클라이언트 환경만으로 움직이는 것입니다.