jQuery is not defined in next.js

Question

I installed jquery and dependencies through the terminal like:

npm i jquery --save

And import jquery in a component like :

import $ from "jquery"

But when I run the project. it throws an error:

ReferenceError: jQuery is not defined

Who can I fix it?

Edit

here is a component file called animate component:

import jQuery from "jquery";
window.$ = window.jQuery = jQuery;
import "jquery-ui/ui/effects/effect-shake";

function animate() {
  $(".addToCart").on("click", function () {
    var cart = $(".fa-shopping-cart");
    var btn = $(this);
    if (btn) {
      var imgclone = btn
        .clone()
        .offset({
          top: btn.offset().top,
          left: btn.offset().left,
        })
        .css({
          opacity: "0.8",
          position: "absolute",
          float: "right",
          height: "40px",
          width: "250px",
          "z-index": "100",
        })
        .appendTo($("body"))
        .animate(
          {
            top: cart.offset().top + 10,
            left: cart.offset().left + 10,
            width: 250,
            height: 40,
          },
          500,
          "easeInOutExpo"
        );

      imgclone.animate(
        {
          width: 0,
          height: 0,
        },
        function () {
          $(this).detach();
        }
      );
    }
  });
}
export default animate;