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

ldxq2e6h 于 2022-11-23 发布在其他

关注(0)|答案(7)|浏览(215)

我正在将一个现有的React应用程序集成到Next.js中，主要用于SEO功能。
我把css文件链接粘贴到Next.js标签中，它们看起来工作得很好。当我尝试使用<script>标签对javascript文件做同样的操作时，它不会执行这些脚本中的代码。但我可以看到它们在chrome开发工具中加载了http 200。
我尝试使用npm中名为Loadjs的库来加载componentDidMount中的脚本，但得到的结果与使用<script>标记完全相同。
在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。

next.js

来源：https://stackoverflow.com/questions/54067291/next-js-loads-script-tags-but-it-doesnt-execute-them

7条答案

按热度按时间

bvjxkvbb1#

这对我很有效：
为静态文件创建文件夹：
<root>/public/static/script.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/script.js"></script>
    </Head>
    <MyAwesomeComponent />
  </div>
)

请注意，static是我在本例中使用的名称，这不是必需的，它可以与任何其他文件夹名称一起使用。

赞(0）回复(0）举报 2022-11-23

a1o7rhls2#

使用下面的方法，您可以轻松地将脚本文件的原始脚本文本放入生成的Next.js HTML页面的<head>中，而无需进行字符转义、格式化和通常的假装，无论如何，我们最终实际上并不只是构建HTML页面。
有许多用例您可能希望脚本在不连接网络的情况下运行。例如：第三方脚本，监控/分析脚本，预计在<head>中没有单独的网络负载。其中许多都被缩小，损坏，你的名字，只是应该复制，粘贴，继续生活。
Next.js使这一点非常困难，假装一切与Web开发是神奇地React和Webpack所有的时间现在（我希望对吗？）
我发现的最好的开发者体验方式是这样做：

_文件.js

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

下一个配置文件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()
  }
}

原始Js来自文件.js

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

希望这能把某人从我忍受的几个小时的沮丧中解救出来。😭

赞(0）回复(0）举报 2022-11-23

jdg4fx2g3#

您还可以运行js代码

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

赞(0）回复(0）举报 2022-11-23

q1qsirdb4#

对于Next.js v11及更高版本，您可以使用Next组件Script
https://nextjs.org/blog/next-11#script-optimization

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

赞(0）回复(0）举报 2022-11-23

ftf50wuq5#

愿这对你有帮助
将静态文件夹移动到根目录下的公用文件夹中

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

赞(0）回复(0）举报 2022-11-23

s2j5cfk06#

这是我尝试过的，它对我很有效。我使用了两个文件entry-script.js和main-script.js。我把这些像这样<root>/static/entry-script.js和<root>/static/main-script.js。entry-script.js的内容如下。

(function (d, t) {
  t = d.createElement("script");
  t.setAttribute("src", "/static/main-script.js");
  d.getElementsByTagName("head")[0].appendChild(t);
})(document);

主要的逻辑在文件main-script.js中。在NextJS的文件_doucment.js中，我将我的文件entry-script.js包含在如下的主体中

class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          <link
            rel="stylesheet"
            href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
          />
        </Head>
        <body>
          <script
            type="text/javascript"
            src="/static/entry-script.js"
          ></script>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

MyDocument.getInitialProps = async (ctx) => {
  // Resolution order
  //
  // On the server:
  // 1. app.getInitialProps
  // 2. page.getInitialProps
  // 3. document.getInitialProps
  // 4. app.render
  // 5. page.render
  // 6. document.render
  //
  // On the server with error:
  // 1. document.getInitialProps
  // 2. app.render
  // 3. page.render
  // 4. document.render
  //
  // On the client
  // 1. app.getInitialProps
  // 2. page.getInitialProps
  // 3. app.render
  // 4. page.render

  // Render app and page and get the context of the page with collected side effects.
  const sheets = new ServerStyleSheets();
  const originalRenderPage = ctx.renderPage;

  ctx.renderPage = () =>
    originalRenderPage({
      enhanceApp: (App) => (props) => sheets.collect(<App {...props} />),
    });

  const initialProps = await Document.getInitialProps(ctx);

  return {
    ...initialProps,
    // Styles fragment is rendered after the app and page rendering finish.
    styles: [
      ...React.Children.toArray(initialProps.styles),
      sheets.getStyleElement(),
    ],
  };
};

赞(0）回复(0）举报 2022-11-23

qmelpv7a7#

我写了一篇文章详细阐述了这个问题，希望它能派上用场：
https://www.devtwins.com/blog/how-to-add-a-third-party-script-to-a-nextjs-website

赞(0）回复(0）举报 2022-11-23