ReferenceError : document is not defined

230708 퍼블리싱 연습중

문제 상황

공통 레이아웃 중 헤더를 추가하면서 발생한 에러...

문제 원인

NextJS는 서버사이드 렌더링 후 클라이언트 렌더링을 진행한다. 이때 Document를 찾지 못해 발생되는 에러다. Document는 브라우저에서만 작동하는 기능이므로 당연스럽게 에러가 발생한 것이었다.

관련 링크arrow-up-right

문제 해결

해당 컴포넌트에서 서버 사이드 렌더링을 비활성화해 클라이언트 사이드 렌더링만 되도록 설정한다.

import dynamic from 'next/dynamic'

export default function Layout (props: { children: React.ReactNode }) {
    // SSR 작동시 Document 사용 불가능함
    // > navbar에서 document를 사용하고 있음 > 오류 발생
    // > 해당 컴포넌트에서 ssr 서버 사이드 렌더링을 비활성화
    const Navbar = dynamic(() => import("./navbar"), {ssr: false})
    return (
        <>
            <Navbar />
            <main>{props.children}</main>
        </>
    )
}

이후 에러 없이 정상적으로 작동한다.

Last updated