web-dev-qa-db-ja.com

next.jsは<script>に外部 ".js"を実装します

Next.jsとWebサイトを構築し、外部.jsファイル（bootstrap.min.js＆popper.min.js）を実装しようとしましたが、表示されません。問題が何であるかわからない！

私はこのようにそれを実装しました：

import Head from 'next/head';

//partials
import Nav from './nav'

const Layout = (props) => (
<div>
    <Head>
        <title>Site</title>

        {/* Meta tags */}
        <meta charset="utf-8"></meta>
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"></meta>
        
        {/* Standard page css */}
        <link rel="stylesheet" type="text/css" href="/static/css/page.css"/>
        
        {/* Bootstrap CSS */}
        <link rel="stylesheet" href="/static/includes/bootstrap.min.css"/>

        {/* jQuery first, then Popper.js, then Bootstrap JS */}
        <script src="/static/includes/popper.min.js"></script>
        <script type="text/javascript" src="/static/includes/bootstrap.min.js"></script>
        
    </Head>
    <Nav/>
    {props.children}
</div>
);

export default Layout; _

それは私にはよさそうですか？私が行方不明のことがあるのは、それがそうでなければ投影されていません！

ページ内でスクリプトを試したとき、それは非常に短い時間のために "Hello JavaScript"を示しています、そしてそれは消えますか？

<p id="demo"></p>
<script>document.getElementById("demo").innerHTML = "Hello JavaScript";</script> _

どうすればいいですか？

助けてください！

IMを使用： "Next"： "^ 8.0.3"、 "React"： "^ 16.8.4"、 "React-Dom"： "^ 16.8.4"

javascripthtmlreactjsnext.jsreact-dom
5
GijsHeg

@gunnerfanは正しい道にありました。これらのファイルをpublicフォルダに入れることをお勧めします。

それで

import Head from "next/head";

// ... elsewhere in your code 
<HEAD>
        <script type="text/javascript" src="js/myscript.js"></script>
</HEAD>

 _

フォルダ内のファイルを直接参照できます。js/<your file>ページディレクトリ内のファイルと同じ名前に名前を付けないように注意してください。pages/myscript.js＆js/myscript.js _

Ref： https://nextjs.org/docs/basic-features/static-file-serving

0
Ramakay

これは私にとって期待どおりに機能しています。

<script
dangerouslySetInnerHTML={{
  __html: `
  console.log('Console message');
`,
}}
/>
 _
0
saravanakumar