ReferenceError: Element is not defined 오류

• 원인

  사용하려는 라이브러리가 ServerSide Rendering 방식으로 동작하지 않을 때 발생

• 해결방안

  Next.js의 dynamic 기능을 사용하여 브라우저 내에서 스크립트가 실행되도록 설정

• 사용예시

  import dynamic from "next/dynamic";
  
  const ClientSideComponent = dynamic(() => import("@/ClientComponent"), { ssr: false });
  

Parallel Routes

• 하나의 URL에서 여러 개의 컴포넌트(또는 템플릿)를 동시에 렌더링할 때 사용

  

  출처: https://nextjs.org/docs/app/api-reference/file-conventions/parallel-routes#slots

Intercepting Routes

• URL 이동 없이 다른 페이지의 컨텐츠를 보여줄 때 사용

  

  출처: https://nextjs.org/docs/app/api-reference/file-conventions/intercepting-routes#convention