title: How to properly use this jQuery script in my Next.Js app?
body: <p>i have this script, that i was using a a plain HTML website, and import it via the <code>&lt;script&gt;</code> tag:</p>
  <pre><code>(function($) {
    var wa_time_out, wa_time_in;
    $(document).ready(function() {
      $(&quot;.wa__btn_popup&quot;).on(&quot;click&quot;, function() {
        if ($(&quot;.wa__popup_chat_box&quot;).hasClass(&quot;wa__active&quot;)) {
          $(&quot;.wa__popup_chat_box&quot;).removeClass(&quot;wa__active&quot;);
          $(&quot;.wa__btn_popup&quot;).removeClass(&quot;wa__active&quot;);
          clearTimeout(wa_time_in);
          if ($(&quot;.wa__popup_chat_box&quot;).hasClass(&quot;wa__lauch&quot;)) {
            wa_time_out = setTimeout(function() {
              $(&quot;.wa__popup_chat_box&quot;).removeClass(&quot;wa__pending&quot;);
              $(&quot;.wa__popup_chat_box&quot;).removeClass(&quot;wa__lauch&quot;);
            }, 400);
          }
        } else {
          $(&quot;.wa__popup_chat_box&quot;).addClass(&quot;wa__pending&quot;);
          $(&quot;.wa__popup_chat_box&quot;).addClass(&quot;wa__active&quot;);
          $(&quot;.wa__btn_popup&quot;).addClass(&quot;wa__active&quot;);
          clearTimeout(wa_time_out);
          if (!$(&quot;.wa__popup_chat_box&quot;).hasClass(&quot;wa__lauch&quot;)) {
            wa_time_in = setTimeout(function() {
              $(&quot;.wa__popup_chat_box&quot;).addClass(&quot;wa__lauch&quot;);
            }, 100);
          }
        }
      });
  
      function setCookie(cname, cvalue, exdays) {
        var d = new Date();
        d.setTime(d.getTime() + exdays * 24 * 60 * 60 * 1000);
        var expires = &quot;expires=&quot; + d.toUTCString();
        document.cookie = cname + &quot;=&quot; + cvalue + &quot;;&quot; + expires + &quot;;path=/&quot;;
      }
  
      function getCookie(cname) {
        var name = cname + &quot;=&quot;;
        var ca = document.cookie.split(&quot;;&quot;);
        for (var i = 0; i &lt; ca.length; i++) {
          var c = ca[i];
          while (c.charAt(0) == &quot; &quot;) {
            c = c.substring(1);
          }
          if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
          }
        }
        return &quot;&quot;;
      }
  
      $(&quot;#nta-wa-gdpr&quot;).change(function() {
        if (this.checked) {
          setCookie(&quot;nta-wa-gdpr&quot;, &quot;accept&quot;, 30);
          if (getCookie(&quot;nta-wa-gdpr&quot;) != &quot;&quot;) {
            $('.nta-wa-gdpr').hide(500);
            $('.wa__popup_content_item').each(function(){
              $(this).removeClass('pointer-disable');
              $('.wa__popup_content_list').off('click');
            })
          }
        }
      });
  
      if (getCookie(&quot;nta-wa-gdpr&quot;) != &quot;&quot;) {
        $('.wa__popup_content_list').off('click');
      } else{
        $('.wa__popup_content_list').click(function(){
          $('.nta-wa-gdpr').delay(500).css({&quot;background&quot; : &quot;red&quot;, &quot;color&quot; : &quot;#fff&quot;});
        });
      }
    });
  })(jQuery);
  </code></pre>
  <p>And i imported jQuery on cdn, putting this before <code>&lt;/head&gt;</code>:</p>
  <pre><code>&lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js&quot;&gt;&lt;/script&gt;
  </code></pre>
  <p>And i need to use this on my NextJS app.</p>
  <p>I tried putting the same script in a file on <code>/public/static/script.js</code></p>
  <p>Then importing on my <code>_app.js</code> like this:</p>
  <pre><code>      &lt;Head&gt;
          &lt;script type=&quot;text/javascript&quot; src=&quot;/static/script.js&quot;&gt;&lt;/script&gt;
          &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js&quot;&gt;&lt;/script&gt;
        &lt;/Head&gt;
  </code></pre>
  <p>Also tried some other ways that i've seen on Google and here, but none works. How can i properly do this?</p>