브라우저 API를 사용하는 컴포넌트를 페이지에서 사용할 시, prerendering이 되지 않는 이슈

[punchdrunkard]

문제 상황

• 클라이언트 API (ex: document) 를 사용하는 컴포넌트를 페이지에서 사용할 시, pre-rendering 과정에서 해당 api를 찾을 수 없어서 빌드가 되지 않는 에러 발생
  • 해당 컴포넌트 :Modal, BottomSheet

해결 방법

• 해당 컴포넌트를 사용할 시에는 기존의 import 방식을 사용하지 않고, next/dynamic 을 이용하여 ssr: false 속성을 적용시켜야 한다.

코드 예시

import { useDisclosure } from '@hooks'
import dynamic from 'next/dynamic'

// 브라우저 API를 사용하는 컴포넌트는 다음과 같이 import 한다.
const BottomSheet = dynamic(
  () => import('../components/templates/BottomSheet'),
  {
    ssr: false,
  },
)

// 이 후 해당 컴포넌트 호출 후 사용
export default function Home() {
  const [showBottomSheet, setShowBottomSheet, toggle] = useDisclosure()

  return (
      <main>
        <div>
          <button
            onClick={toggle}
            className=" bg-violent_gradient text-gray-100"
          >
            바텀 시트 나와라!
          </button>
          <BottomSheet
            hasCloseButton={true}
            showBottomSheet={showBottomSheet}
            setShowBottomSheet={setShowBottomSheet}
          >
            <div className="h-[475px] bg-gray-100 text-[80px] font-extrabold text-gray-700">
              안쪽
            </div>
          </BottomSheet>
        </div>
      </main>
  )
}

[punchdrunkard]

또한 dynamic 안에서 절대 경로도 안먹습니다....

[jinyoung234]

이게 다이나믹 Import로 해결이 되는군여 . . . 그러면 결국 pre-rendering 에서 문제가 되었나 보네여

[punchdrunkard]

네네 에러뜨는거 메시지 잘 찾아보면 document 찾을 수 없다는 메시지가 있어요!