I am working with Reactjs(Nextjs),I am trying to integrate home page(index.js),i have following javascript files and code,i want to know that where should put these file(exist in "public" folder) ? and how ? i mean should i use these files in "_app.js" or create separate file "document.js" for this, What is the right way ?
<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>
This way is wrong! You should don't use jQuery in ReactJs/NextJs. It has conflict with virtual Dom consept, because jQuery change Dom after any change, but react just change virtual Dom elements.
You can define useEffect and listener for page load in _app.js. like tis:
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);
}
}, []);