我试图使用 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;
这是我的目录结构，
目录结构 https://i.stack.imgur.com/JfPe4.png
在建议使用页面目录中的 _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>
);
}
Update:
Changed beforeInteractive to 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>
)
}
NextJS 会知道寻找没有 URL 前缀引用的脚本，例如https在公共文件夹中。
了解更多关于<Script>组件和其他负载strategys here:
https://nextjs.org/docs/basic-features/script#overview https://nextjs.org/docs/basic-features/script#overview and https://nextjs.org/docs/api-reference/next/script https://nextjs.org/docs/api-reference/next/script
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
