Css not loading properly in Reactjs

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

Answer

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>
  )
}

Advertisement

Answer