Nextjs 에서 client side 라이브러리 import 시 에러 해결

기존 React에서 html2pdf 라이브러리를 사용하고 있었는데, 이번에 보안 이슈 때문에 이 라이브러리를 사용하는 페이지만 따로 만들게 되었는데, 이 프로젝트를 NextJS로 만들어보면서 생긴 이슈이다.

html2pdf 는 client side library 이고, 여기서 사용하는 jspdf 또한 client side 라이브러리이다. 그래서 서버 사이드에 대한 고려가 완벽하게 되어있지 않고, 브라우저 api를 사용하는 곳이 있어서 발생한 것으로 보인다.

해결 방법은 dynamic import 를 통해 client side에서만 불러와서 사용하게 하는 것이다.

useEffect(() => {
  // @ts-ignore
  import('html2pdf.js').then((html2pdf) => {
    html2pdf.default().from(document.getElementById('print-target')).outputPdf('datauristring').then((data: string) => {  
    });
  });
}, [])

click 등에서 사용하게 하려면 useEffect 에서 html2pdf.default() 를 state 나 ref에 넣어두고, 기존처럼 사용하면 된다.