Next.js에서 '창이 정의되지 않았습니다' 오류를 수정하는 방법은 무엇입니까?

Next.js React 앱에 창이 정의되어 있지 않습니다: 포괄적인 해결

Next.js 애플리케이션에서 " 전역 '창' 개체에 액세스하려고 하면 창이 정의되지 않았습니다." 이는 클라이언트 측 렌더링 중에만 창 개체를 사용할 수 있기 때문에 발생할 수 있습니다. 이 문제를 해결하는 방법은 다음과 같습니다.

'window' 개체를 사용하려면 'window'가 정의되었는지 확인하는 'if' 문으로 코드를 묶을 수 있습니다.

if (typeof window !== "undefined") {
  // Client-side-only code
  console.log('window.innerHeight', window.innerHeight);
}

이 접근 방식을 사용하면 'if' 블록 내의 코드가 'window' 개체에 액세스할 수 있는 클라이언트 측에서만 실행됩니다.

다음 제안 사용 'process.browser'를 통해 'window'에 액세스하는 것은 Webpack5와 Next.js 모두에서 더 이상 사용되지 않으므로 더 이상 권장되지 않습니다. 'process' 객체는 주로 서버 측 렌더링에 사용되며 클라이언트 측 작업에 사용하는 것은 적절하지 않습니다.

따라서 권장되는 해결 방법은 'window' 객체가 있는지 확인하기 전에 그것에 액세스하는 중입니다. 이렇게 하면 클라이언트측 렌더링 환경과 서버측 렌더링 환경 간에 코드를 이식할 수 있습니다.

위 내용은 Next.js에서 '창이 정의되지 않았습니다' 오류를 수정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!