web-dev-qa-db-ja.com

Next.js <script>タグを読み込みますが、実行しません

主にSEO機能のために、既存のReactアプリをNext.jsに統合しています。

<Header>のNext.jsタグ内にcssファイルのリンクを貼り付けたところ、問題なく動作するようです。 <script>タグを使用してjavascriptファイルで同じことを実行しようとしたとき、それらのスクリプト内のコードは実行されません。しかし、chrome開発ツールでhttp 200がロードされているのを確認できます。

Loadjsから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/[email protected]/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を実行する1つのスクリプトを逃したことがわかりました。

javascriptreactjsnext.js
6
Sharl Sherif

これがあなたを助けるかもしれません 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>
  )
0
Parth Bambhaniya

これをjsコードで実行することもできます

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