Estoy trabajando con Reactjs (Nextjs), estoy tratando de integrar la página de inicio (index.js), tengo los siguientes archivos y código javascript, quiero saber dónde debo colocar estos archivos (existen en la carpeta "pública")? y cómo ? Quiero decir, ¿debería usar estos archivos en "_app.js" o crear un archivo separado "document.js" para esto? ¿Cuál es la forma correcta?
<script src="assets/js/bootstrap.bundle.min.js"></script> <script src="assets/js/jquery.min.js"></script> <script src="assets/js/isotope.pkgd.js"></script> <script> $(window).load(function() { var $projects = $('.projects').isotope({ itemSelector: '.project', layoutMode: 'fitRows' }); $(".filter-btn").click(function() { var data_filter = $(this).attr("data-filter"); $projects.isotope({ filter: data_filter }); $(".filter-btn").removeClass("active"); $(".filter-btn").removeClass("shadow"); $(this).addClass("active"); $(this).addClass("shadow"); return false; }); }); </script> <script src="assets/js/templatemo.js"></script> <script src="assets/js/custom.js"></script>¡Esta manera está mal! No debe usar jQuery en ReactJs/NextJs. Tiene un conflicto con el concepto de Dom virtual, porque jQuery cambia Dom después de cualquier cambio, pero reacciona solo cambia los elementos de Dom virtual. Puede definir useEffect y listener para la carga de la página en _app.js . como este:
useEffect(() => { const onPageLoad = () => { setPlayAnimation(true); }; // Check if the page has already loaded if (document.readyState === "complete") { onPageLoad(); } else { window.addEventListener("load", onPageLoad); // Remove the event listener when component unmounts return () => window.removeEventListener("load", onPageLoad); } }, []);