Next.js 加载 <script> 标签但不执行它们

IT技术 javascript reactjs next.js
2021-03-27 01:17:58

我正在将现有的 React 应用程序集成到 Next.js 中，主要用于 SEO 功能。

我粘贴了<Header>标签内的 css 文件链接Next.js，它们似乎工作得很好。当我尝试使用<script>标记对 javascript 文件执行相同操作时，它不会执行这些脚本中的代码。但我可以看到它们已加载http 200到 chrome 开发工具中。

我尝试使用一个名为Loadjsfrom的库npm来加载其中的脚本，componentDidMount但得到的结果与使用<script>tag完全相同。

有没有正确的方法来做Next.js我不知道的这么简单的事情？

这是pages/index.js文件中包含的代码。

  import React from "react"
  import Head from 'next/head'
  import MyAwesomeComponent from "../components/mycomponent.js"
  export default () => (
    <div>
      <Head>

        <link type="text/css" rel="stylesheet" href="static/css/chatwidget.css" />
        <link type="text/css" rel="stylesheet" href="static/css/download.css" />

        <script type="text/javascript" src="static/libs/jquery.min.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/malihu-custom-scrollbar-plugin@3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>
        <script type="text/javascript" src="static/libs/bootstrap.min.js"></script>
        <script type="text/javascript" src="static/libs/owl.carousel.min.js"></script>
        <script type="text/javascript" src="static/scripts/chatHead.js"></script>
        <script type="text/javascript" src="static/libs/jquery.magnific-popup.js"></script>
      </Head>

      <MyAwesomeComponent /> {/* a simple React component that returns  : <p>Hello World </p>*/}
    </div>
  )

抱歉回复晚了。事实证明，scripts我链接的所有内容都错过了一个脚本，该脚本实际上会functions为每个操作运行。

6个回答

这对我有用：

为您的静态文件创建一个文件夹：

<root>/static/hello.js

在你的 index.js 中

<root>/pages/index.js

import Head from 'next/head';
import MyAwesomeComponent from '../components/mycomponent';

export default () => (
  <div>
    <Head>
      <script type="text/javascript" src="/static/hello.js"></script>
    </Head>
    <MyAwesomeComponent />
  </div>
)

希望这有帮助，

问候

你的想法是对的，但我认为你的意思是把脚本放在/public不/static
2021-05-30 01:17:58
是的，几年前在本地测试过:)，你们使用的是哪个 nextjs 版本？
2021-06-02 01:17:58
同样在这里。试图找到一个热重载的解决方案。@Shadab 有任何进展吗？
2021-06-05 01:17:58
嗨@AndreVitorio 我已经添加了一个答案，看看它。它在开发环境中为我工作。
2021-06-12 01:17:58
这在开发环境中有效吗？因为我试过这个，似乎它不起作用。
2021-06-13 01:17:58

使用下面的方法，您可以轻松地将脚本文件的原始脚本文本放入生成的 Next.js HTML 页面中，<head>而无需担心字符转义、格式化和一般假装我们实际上并没有最终构建一个 HTML 页面。

有许多用例您可能希望脚本在不连接网络的情况下运行。例如：第 3 方脚本、监控/分析脚本，它们希望在<head>没有单独网络负载的情况下使用。其中许多都经过缩小、损坏、随心所欲，并且应该只是复制、粘贴、继续生活。

Next.js 让这一切变得非常困难，假装 Web 开发的一切都是神奇的 React 和 Webpack（我希望对吗？）

我发现的最好的开发人员体验方式是这样做：

_document.js

...
<Head>
  <script type="text/javascript" dangerouslySetInnerHTML={{ __html: process.env.rawJsFromFile }}></script>
</Head>
...

下一个.config.js

https://github.com/vercel/next.js/blob/canary/packages/next/next-server/server/config.ts#L33

module.exports = {
  env: {
    rawJsFromFile: fs.readFileSync('./rawJsFromFile.js').toString()
  }
}

rawJsFromFile.js

alert('Freedom!!!!!!!!!!!!!!!');
// and other 3rd party script junk, heck even minified JS is fine too if you need

希望这能让某人免于我忍受了数小时的沮丧......😭

如果您包含带有内联代码的 3rd 方脚本，这是正确的答案。\o/
2021-06-16 01:17:58
谢谢约翰..这非常适合它。我已经尝试过危险的SetInnerHTML，但是webpack 正在修改包含的js。这是包含跟踪 js 的完美方式，没有任何来自 ts 的抱怨，无需将其作为单独的脚本加载，也没有 js 被修改的风险。每一个感恩！
2021-06-19 01:17:58

你也可以运行js代码这个

          <script
            dangerouslySetInnerHTML={{
              __html: `
                      let a = 1;
                      functionCall();
                  `,
            }}
          ></script>

使用 Next.js v11，您可以使用 Next 组件 Script

https://nextjs.org/blog/next-11#script-optimization

<Script
  src="..."
  strategy="beforeInteractive"
/>

可以帮助您Nextjs 公共文件夹

将您的静态文件夹移动到根目录中的公用文件夹中

export default () => (
    <div>
      <Head>

        <link type="text/css" rel="stylesheet" href="/static/css/chatwidget.css" />
        <link type="text/css" rel="stylesheet" href="/static/css/download.css" />

        <script type="text/javascript" src="/static/libs/jquery.min.js"></script>
        ...
      </Head>

      <MyAwesomeComponent /> 
    </div>
  )
其它你可能感兴趣的问题
上一篇未找到入口module：错误：无法解析“./src/index.js” 下一篇无法设置 HMR：在控制台中卡住“正在等待来自 WDS 的更新信号...”