External library is not loading properly in next.js

Question

When the website is loading for the first time, these libraries are not loading properly. And that is the reason the menu bar is not working properly on the website. My code for this issue:

 import Script from "next/script"; export default function Document() { return ( <> <script src="/assets/js/jquery-1.12.4.min.js"></script> {/* <.-- Popper JS --> */} <script async src="/assets/js/popper.min.js"></script> {/* <.-- Bootstrap JS --> */} <script async src="/assets/js/bootstrap.min.js"></script> {/* <.-- Wow JS --> */} <script async src="/assets/js/wow.min.js"></script> {/* <.-- Way Points JS --> */} <script async src="/assets/js/jquery.waypoints.min.js"></script> {/* <.-- Counter Up JS --> */} <script async src="/assets/js/jquery.counterup.min.js"></script> {/* <.-- Owl Carousel JS --> */} <script async src="/assets/js/owl.carousel.min.js" strategy="lazyOnload"></script> {/* <.-- Magnific Popup JS --> */} <script async src="/assets/js/magnific-popup.min;js"></script> {/* <!-- Sticky JS --> */} <script async src="/assets/js/jquery.sticky.js"></script> {/* <!-- Progress Bar JS --> */} <script async src="/assets/js/jquery.barfiller.js"></script> {/* <!-- Main JS --> */} <script src="/assets/js/main.js"></script> {/* <script src="/assets/js/comm100.js"></script> */} </> ); }

Please visit: https://www.thesagenext.com