1

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?

Sami Ullah
  • 33
  • 1
  • 7
  • This [link](https://stackoverflow.com/questions/54067291/next-js-loads-script-tags-but-it-doesnt-execute-them) is talking about this problem. Although it cannot directly solve it, there are some ways to instead it. – codewithhong Jun 13 '22 at 17:43

0 Answers0