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

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

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

我尝试使用名为Loadjsfrom 的库npm将脚本加载到内部,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>
  )

Sorry for the late answer. it turned out that all the scripts i linked missed one script that would actually run the functions for each action.

JimDavaid卡卡西2020/03/23 11:57:16

也许这可以帮助您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>
  )
斯丁2020/03/23 11:57:16

您也可以运行js代码

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