I'm trying to add third-party script files from a public folder in the Next Js pages/_document.js file as below,
import { Html, Head, Main, NextScript } from 'next/document'
import Script from 'next/script'
export default function Document() {
return (
<Html>
<Head/>
<body>
<Main />
<NextScript />
<Script src="lib/js/jquery-3.3.1.min.js" strategy="beforeInteractive"/>
<Script src="lib/js/bootstrap.min.js" strategy="beforeInteractive"/>
<Script src="lib/js/jquery.nice-select.min.js" strategy="beforeInteractive"/>
<Script src="lib/js/jquery-ui.min.js" strategy="beforeInteractive"/>
<Script src="lib/js/jquery.slicknav.js" strategy="beforeInteractive"/>
<Script src="lib/js/mixitup.min.js" strategy="beforeInteractive"/>
<Script src="lib/js/owl.carousel.min.js" strategy="beforeInteractive"/>
<Script src="lib/js/main.js" strategy="beforeInteractive" />
</body>
</Html>
);
}
My script files are under the public/lib/js directory. I verified by running my next app and inspected and came to know scripts are never loaded. Any suggestion/idea why scripts aren't loading this way?