[React] nextJS에서 채널톡 서비스 이용하기

next를 사용하는 프로젝트 진행 중 채널톡을 다는데 

 

ReferenceError: window is not defined

 

다음과 같은 에러가 났다. 

 

React 가이드를 따라 채널톡을 붙히면 CSR이 진행 될 시 window에 접근할 수 있지만,

 

next는 SSR이 진행되어 서버측에서 DOM에 접근할수 없기에 생기는 오류였다. 

 

pages의 _document.js 파일에 

<script
           // eslint-disable-next-line react/no-danger
           dangerouslySetInnerHTML={{
             __html: `(function() {
   var w = window;
   if (w.ChannelIO) {
     return (window.console.error || window.console.log || function(){})('ChannelIO script included twice.');
   }
   var ch = function() {
     ch.c(arguments);
   };
   ch.q = [];
   ch.c = function(args) {
     ch.q.push(args);
   };
   w.ChannelIO = ch;
   function l() {
     if (w.ChannelIOInitialized) {
       return;
     }
     w.ChannelIOInitialized = true;
     var s = document.createElement('script');
     s.type = 'text/javascript';
     s.async = true;
     s.src = 'https://cdn.channel.io/plugin/ch-plugin-web.js';
     s.charset = 'UTF-8';
     var x = document.getElementsByTagName('script')[0];
     x.parentNode.insertBefore(s, x);
   }
   if (document.readyState === 'complete') {
     l();
   } else if (window.attachEvent) {
     window.attachEvent('onload', l);
   } else {
     window.addEventListener('DOMContentLoaded', l, false);
     window.addEventListener('load', l, false);
   }
 })();
 ChannelIO('boot', {
   "pluginKey": "개인 플러그인 키"
 });
`,
           }}
         />

 

다음과 같은 스크립트를 삽입하여 간단하게 채널톡 기능을 이용할 수 있었다.