在 Next Js 中导入脚本文件的正确方法是什么？

Question

在 Next Js 中导入脚本文件的正确方法是什么？

Sam*_*lah 3 javascript jquery reactjs bootstrap-4 next.js

我试图使用 bootstrap 模板，但由于无法导入 JS，CSS 文件已正确导入。我发现在 Next Js 中你可以将它们导入 useEffect hook 中。但仍然给出了找不到脚本的错误。这是我的代码，

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.com/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;

Run Code Online (Sandbox Code Playgroud)

这是我的目录结构，

目录结构

在建议使用页面目录中的 _document.js 来包含本地脚本后，但在渲染页面时它们仍然不包含在内。

pages/_document.js 代码如下，

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

Chi*_*olo 5

更新：

变成。beforeInteractive lazyOnload您也可以使用afterInteractive.

假设您有一个本地脚本文件：myscript.js您正尝试将其包含在 NextJS 项目中，以包含它：

将脚本文件放入您的/public文件夹中，然后
在您的页面组件中添加：

内页组件：

import Script from 'next/script'

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

Run Code Online (Sandbox Code Playgroud)

NextJS 将知道查找没有 URL 前缀引用的脚本，例如https在公共文件夹中。

在此处了解有关<Script>组件和其他负载的更多信息strategy：

https://nextjs.org/docs/basic-features/script#overview和https://nextjs.org/docs/api-reference/next/script

归档时间：	3 年，5 月前
查看次数：	10073 次
最近记录：	3 年，5 月前