如何将供应商脚本导入nextjs

bybem2ql 于 12个月前发布在其他

关注(0)|答案(3)|浏览(89)

我的应用需要一个不在npm上的脚本，所以我的项目文件夹中有这个文件，但是我如何在我的nextJs应用中使用它呢？
我尝试将脚本放在public文件夹中，然后使用next/head：

<Head>
  <script type="text/javascript" src="/public/CustomEase.min.js"></script>
</Head>

字符串
但是找不到脚本。

next.js

来源：https://stackoverflow.com/questions/63289726/how-to-import-a-vendor-script-into-nextjs

3条答案

按热度按时间

jchrr9hc1#

只需使用src="/CustomEase.min.js"。public文件夹是您的公共URL的根文件夹。

赞(0）回复(0）举报 12个月前

fcy6dtqo2#

嗯，这就是我如何加载供应商脚本，即jQuery。如果您托管的是其资产资源文件，则将该文件移动到Public文件夹中，然后您应该能够使用相对路径访问它：
注：重要的是要把“/”作为下一步将开始假装页面名称到您的路径名.特别是当你做动态路由即pages -> randompage -> [param].js可能会导致/randompage/js/somefile.js到您的资源路径，如果你排除/

const Layout = ({ children }) => {
  return (
    <>
      <Head>
        <meta charSet="utf-8" />
        <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
        <link rel="icon" type="image/png" href="/favicon.png"></link>
        <title>Title Here</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
        <link rel="stylesheet" href="/css/somefile.css" />
        <script src="/js/somefile.js"></script>
      </Head>
      {children}
      <script src="/js/somefile.js"></script>
    )
}
export default Layout

字符串

赞(0）回复(0）举报 12个月前

yc0p9oo03#

有几种方法可以将第三方JS文件导入Next.js项目。
以下是Next.js团队推荐的方法。
1.添加第三方JavaScript
需要尽快加载和执行的脚本通常会添加到页面中。使用常规HTML元素，可以添加外部脚本，如下所示：

<Head>
  <title>First Post</title>
  <script src="https://connect.facebook.net/en_US/sdk.js" />
</Head>

字符串
1.使用脚本组件
next/script是HTML元素的扩展，在获取和执行其他脚本时进行优化。
在同一个文件中，在文件的开头添加一个从next/script导入脚本的命令：

import Script from 'next/script';

型
现在，更新FirstPost组件以包含Script组件：

export default function FirstPost() {
  return (
    <>
      <Head>
        <title>First Post</title>
      </Head>
      <Script
        src="https://connect.facebook.net/en_US/sdk.js"
        strategy="lazyOnload"
        onLoad={() =>
          console.log(`script loaded correctly, window.FB has been populated`)
        }
      />
      <h1>First Post</h1>
      <h2>
        <Link href="/">← Back to home</Link>
      </h2>
    </>
  );
}

型

赞(0）回复(0）举报 12个月前

我来回答

如何将供应商脚本导入nextjs

3条答案

相关问题

热门标签

最新问答