I am working in reactjs and using (Nextjs) framework,I have All "css,js,images" in "public" folder and in "_app.js" i included all these files,But i whenever i tyring to open "Main page" in browser then page is not displaying (only loader showing) , In other words, webpage not displaying properly Here is my code in "_app.js",Where i am wrong ?
import Script from 'next/script'
import '../styles/globals.css'
import '../public/vendor/bootstrap/css/bootstrap.min.css'
import '../public/css/fontawesome.css'
import '../public/css/templatemo-stand-blog.css'
import '../public/css/owl.css'
//import {Helmet} from "react-helmet";
import {useEffect} from "react";
function MyApp({Component, pageProps}) {
useEffect(() => { // You can add more scripts if you repeat the same lines of code.
const script = document.createElement('script');
script.src = "../vendor/jquery/jquery.min.js";
script.async = true;
document.body.appendChild(script);
const script2 = document.createElement('script');
script2.src = "../vendor/bootstrap/js/bootstrap.bundle.min.js";
script2.async = true;
document.body.appendChild(script2);
return () => {
document.body.removeChild(script);
document.body.removeChild(script2);
}
}, []);
//return ;
return (
<>
<Script src="https://www.google-analytics.com/analytics.js" />
<Component {...pageProps} />
</>
)
}
export default MyApp
refer to this article about including scripts in you NextJs project https://nextjs.org/docs/basic-features/script
You need to create _document.js file where you will place your scripts tags by importing
import Script from 'next/script'
the code your writing should not be in the _app.js file
something like this
export default function Document() {
return (
<Html>
<Head />
<body>
<Main />
<NextScript />
<Script
src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js"
strategy="beforeInteractive"
></Script>
</body>
</Html>
)
}