[Next.js] "window,document is not defined" 해결하는 법

next.js는 server-side에서 먼저 실행 되고, 그 후에 client-side에서 실행된다.
그런 이유로 서버에서는 웹 페이지를 렌더링할 때 window, document등의 object가 없기 때문에 에러가 발생한다!

next/dynamic을 사용하는 것도 방법이다. 특정 조건에서만 import하도록 설정할 수 있으며, ssr:false처럼 지정할 수도 있다.

const Contents = dynamic(
	() => import('컴포넌트 경로'),
	{
		ssr: false,
	},
);