javascript - What is proper way to import script files in Next Js?

I was trying to use a template of bootstrap, CSS files are imported properly by I'm not able to import JS. I came to know that in Next Js you can import them in useEffect hook. But still, it gives an error that the script not found. Here is my code,

import Head from 'next/head';
import '../styles/globals.css';
import { useEffect } from 'react';

function MyApp({ Component, pageProps }) {
  useEffect(() => {
    import("../public/lib/js/jquery-3.3.1.min.js");
    import("../public/lib/js/bootstrap.min.js");
    import("../public/lib/js/jquery.nice-select.min.js");
    import("../public/lib/js/jquery-ui.min.js");
    import("../public/lib/js/jquery.slicknav.js");
    import("../public/lib/js/mixitup.min.js");
    import("../public/lib/js/owl.carousel.min.js");
    import("../public/lib/js/main.js");
  }, []);
  return (
      <>
      <Head>

        <meta charset="UTF-8"/>
        <meta name="keywords" content="Ogani, unica, creative, html"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <meta http-equiv="X-UA-Compatible" content="ie=edge"/>

        {/* Font */}
        <link href=":wght@200;300;400;600;900&display=swap" rel="stylesheet"/>
        {/* CSS */}
        <link rel="stylesheet" href="lib/css/bootstrap.min.css" type="text/css"/>
        <link rel="stylesheet" href="lib/css/font-awesome.min.css" type="text/css"/>
        <link rel="stylesheet" href="lib/css/elegant-icons.css" type="text/css"/>
        <link rel="stylesheet" href="lib/css/nice-select.css" type="text/css"/>
        <link rel="stylesheet" href="lib/css/jquery-ui.min.css" type="text/css"/>
        <link rel="stylesheet" href="lib/css/owl.carousel.min.css" type="text/css"/>
        <link rel="stylesheet" href="lib/css/slicknav.min.css" type="text/css"/>
        <link rel="stylesheet" href="lib/css/style.css" type="text/css"/>


      </Head>
      <Component {...pageProps} />
      </>
   );
  }
  export default MyApp;

Here is my directory structure,

Directory Structure

After the suggestion is used _document.js inside the pages directory to include local scripts but still they aren't included when the page is rendered.

pages/_document.js code is below,

import { Html, Head, Main, NextScript } from 'next/document'
import Script from 'next/script'

export default function Document() {
  return (
    <Html>
      <Head>
            {/* Site Tag */}
            <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" />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

import Head from 'next/head';
import '../styles/globals.css';
import { useEffect } from 'react';

function MyApp({ Component, pageProps }) {
  useEffect(() => {
    import("../public/lib/js/jquery-3.3.1.min.js");
    import("../public/lib/js/bootstrap.min.js");
    import("../public/lib/js/jquery.nice-select.min.js");
    import("../public/lib/js/jquery-ui.min.js");
    import("../public/lib/js/jquery.slicknav.js");
    import("../public/lib/js/mixitup.min.js");
    import("../public/lib/js/owl.carousel.min.js");
    import("../public/lib/js/main.js");
  }, []);
  return (
      <>
      <Head>

        <meta charset="UTF-8"/>
        <meta name="keywords" content="Ogani, unica, creative, html"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <meta http-equiv="X-UA-Compatible" content="ie=edge"/>

        {/* Font */}
        <link href="https://fonts.googleapis./css2?family=Cairo:wght@200;300;400;600;900&display=swap" rel="stylesheet"/>
        {/* CSS */}
        <link rel="stylesheet" href="lib/css/bootstrap.min.css" type="text/css"/>
        <link rel="stylesheet" href="lib/css/font-awesome.min.css" type="text/css"/>
        <link rel="stylesheet" href="lib/css/elegant-icons.css" type="text/css"/>
        <link rel="stylesheet" href="lib/css/nice-select.css" type="text/css"/>
        <link rel="stylesheet" href="lib/css/jquery-ui.min.css" type="text/css"/>
        <link rel="stylesheet" href="lib/css/owl.carousel.min.css" type="text/css"/>
        <link rel="stylesheet" href="lib/css/slicknav.min.css" type="text/css"/>
        <link rel="stylesheet" href="lib/css/style.css" type="text/css"/>


      </Head>
      <Component {...pageProps} />
      </>
   );
  }
  export default MyApp;

Here is my directory structure,

Directory Structure

After the suggestion is used _document.js inside the pages directory to include local scripts but still they aren't included when the page is rendered.

pages/_document.js code is below,

import { Html, Head, Main, NextScript } from 'next/document'
import Script from 'next/script'

export default function Document() {
  return (
    <Html>
      <Head>
            {/* Site Tag */}
            <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" />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

Share Improve this question edited Jun 13, 2022 at 10:34 juliomalves 50.4k23 gold badges177 silver badges168 bronze badges asked Jun 13, 2022 at 8:12 Sami Ullah 531 gold badge1 silver badge7 bronze badges

Have a look at this: nextjs/docs/basic-features/script#overview and this: nextjs/docs/api-reference/next/script to see if they solve your problem. They explain the correct ways to include scripts in a NextJS project. – Chizaram Igolo Commented Jun 13, 2022 at 8:26
@ChizaramIgolo I've tried that already. Script tag loads from 3rd party CDN etc. I want to load the script files from my public directory. There is no example of loading from the public directory with a Script tag. – Sami Ullah Commented Jun 13, 2022 at 8:33
Okay, I get you. For the benefit of those who may ask the same question in the future, please see my answer. – Chizaram Igolo Commented Jun 13, 2022 at 9:25
1 @ChizaramIgolo please check the above I edited and posted as per your answer. – Sami Ullah Commented Jun 13, 2022 at 10:10
Using the beforeInteractive strategy in _document currently doesn't work as expected. See Why does the next.js Script tag with the beforeInteractive strategy don't load thirdParty script? for a solution/workaround. – juliomalves Commented Jun 13, 2022 at 10:25

| Show 5 more ments

1 Answer 1

Sorted by: Reset to default 6

Update:

Changed beforeInteractive to lazyOnload. You may also use afterInteractive.

Say you have a local script file: myscript.js that you are trying to include in your NextJS project, to include it:

Place the script file in your /public folder and
In your page ponent add:

Inside page ponent:

import Script from 'next/script'

export default function Document() {
  return (
    <div>
       {/* Other stuff */}
        <Script
          src="myscript.js"
          strategy="lazyOnload"
        />
    </div>
  )
}

NextJS will know to look for scripts referenced without a URL prefix like https in the public folder.

Learn more about the <Script> ponent and other load strategys here:

https://nextjs/docs/basic-features/script#overview and https://nextjs/docs/api-reference/next/script

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - What is proper way to import script files in Next Js? - Stack Overflow

1 Answer 1

Update:

与本文相关的文章

评论列表(0)