既存のHTMLにNext.jsで作成したコンポーネントをインクルードしたいんですが、やり方がわかりません。
解決したいこと
既存のHTMLにNext.jsで作成したコンポーネントをインクルードしたいんですが、やり方がわかりません。情報が少なくて困ってます。ご教授お願いします。
発生している問題・エラー
[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (polyfills-78c92fac7aa8fdd8.js, line 0)
[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (webpack-d81517dd8a5b34b1.js, line 0)
[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (main-81fbd412da44d98f.js, line 0)
[Error] Refused to execute http://127.0.0.1:5500/MY%20WEB%20SIGHT/my-portfolio/bgm-app/build/static/chunks/596-1f2608a42259096f.js as script because "X-Content-Type-Options: nosniff" was given and its Content-Type is not a script MIME type.
[Error] Refused to execute http://127.0.0.1:5500/MY%20WEB%20SIGHT/my-portfolio/bgm-app/build/static/chunks/675-7d382b20d71648f7.js as script because "X-Content-Type-Options: nosniff" was given and its Content-Type is not a script MIME type.
[Error] Refused to execute http://127.0.0.1:5500/MY%20WEB%20SIGHT/my-portfolio/bgm-app/build/static/chunks/fd9d1056-9200b628bfbdc6da.js as script because "X-Content-Type-Options: nosniff" was given and its Content-Type is not a script MIME type.
[Error] Refused to execute http://127.0.0.1:5500/MY%20WEB%20SIGHT/my-portfolio/bgm-app/build/static/chunks/framework-d8036b06de146ecc.js as script because "X-Content-Type-Options: nosniff" was given and its Content-Type is not a script MIME type.
[Error] Refused to execute http://127.0.0.1:5500/MY%20WEB%20SIGHT/my-portfolio/bgm-app/build/static/chunks/main-app-e7222f86db5e6d9f.js as script because "X-Content-Type-Options: nosniff" was given and its Content-Type is not a script MIME type.
[Error] Refused to execute http://127.0.0.1:5500/MY%20WEB%20SIGHT/my-portfolio/bgm-app/build/static/chunks/polyfills-78c92fac7aa8fdd8.js as script because "X-Content-Type-Options: nosniff" was given and its Content-Type is not a script MIME type.
[Error] Refused to execute http://127.0.0.1:5500/MY%20WEB%20SIGHT/my-portfolio/bgm-app/build/static/chunks/webpack-d81517dd8a5b34b1.js as script because "X-Content-Type-Options: nosniff" was given and its Content-Type is not a script MIME type.
[Error] Refused to execute http://127.0.0.1:5500/MY%20WEB%20SIGHT/my-portfolio/bgm-app/build/static/chunks/main-81fbd412da44d98f.js as script because "X-Content-Type-Options: nosniff" was given and its Content-Type is not a script MIME type.
例）
NameError (uninitialized constant World)
### 該当するソースコード
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="portfolio.css">
<link rel="stylesheet" href="destyle.css">
<link rel="stylesheet" href="MS.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Castoro+Titling&family=Monoton&family=Montserrat+Alternates:wght@500&family=Questrial&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./bgm-app/pages/Music.css">
<link rel="stylesheet" href="./bgm-app/build/static/css/a3cdc6ccc4d680a7.css">
<link rel="stylesheet" href="./bgm-app/build/static/css/d337a9e7eb136a1b.css">
<title>Document</title>
</head>
<body>
<div class="mask"></div>
<div class="mask2"></div>
<div class="line"></div>
<div class="count-down"></div>
<div id="cursor"></div>
<div id="g-ms">
<div class="g-ms_i"></div>
</div>
<header>
<div class="site-title">
<p class="title-name">Akira </p>
<p class="sakamoto">Sakamoto</p>
</div>
<div id="root"></div>
<script src="./bgm-app/build/static/chunks/596-1f2608a42259096f.js"></script>
<script src="./bgm-app/build/static/chunks/675-7d382b20d71648f7.js"></script>
<script src="./bgm-app/build/static/chunks/fd9d1056-9200b628bfbdc6da.js"></script>
<script src="./bgm-app/build/static/chunks/framework-d8036b06de146ecc.js"></script>
<script src="./bgm-app/build/static/chunks/main-app-e7222f86db5e6d9f.js"></script>
<script src="./bgm-app/build/static/chunks/polyfills-78c92fac7aa8fdd8.js"></script>
<script src="./bgm-app/build/static/chunks/webpack-d81517dd8a5b34b1.js"></script>
<script src="./bgm-app/build/static/chunks/main-81fbd412da44d98f.js"></script>
</header>
<div class="container">
<!-- <div class="circle"></div>
-->
<main>
<div class="big-title2">
<h1 class="catch">
Where Imagination <br> Meets Possibility<br>
Unleashing the Power<br> of Innovation </h1>
</div>
<progress class="progress" value="25" max="100"></progress>
</main>
<section>
<ul class="works">
<li class="works-img"><img></li>
<li class="works-img"><img></li>
<li class="works-img"><img></li>
<li class="works-img"><img></li>
</ul>
<div class="nav-container">
<nav class="navi">
<div class="dot animate__bounce animate__infinite"></div>
<a href="portfolio-about.html" class="about">About</a>
<div class="center">
<div class="center-inner">
<div class="inner">
<a href="portfolio-contact.html" class="contact">Contact</a>
<span class="line1"></span>
</div>
</div>
</div>
</nav>
</div>
</section>
</div>
<div class="slide-inner">
<div class="move-teximg">
<p class="centered big-title back moving">
<span class="move-text">portfolio 2023-2024 </span>
<span class="move-text">portfolio 2023-2024 </span>
</p>
<!-- <div class="centered clipping-container">
<p class="centered big-title front moving">
<span class="move-text">portfolio 2023 - 2024 </span>
<span class="move-text">portfolio 2023 - 2024 </span>
</p>
</div>
-->
</div>
</div>
<span class="mark"> + </span>
<!-- <span class="spice"> " " </span> -->
<div class="big-about">
<a class="big-text" href="portfolio-about.html">ABOUT</a>
</div>
<footer>
<h6 class="copy">©Akira Sakamoto.com All Rights Reserved</h6>
</footer>
<!-- <script type="module">
import barba from './path/to/@barba/core'; // モジュールのパスを正しく指定してください
// ここからbarbaを使用したコードを記述してください
</script> -->
<script src="./jquery-3.7.0.min.js"></script>
<!-- <script src="./bgm.js"></script> -->
<script src="loading-animation.js"></script>
<!-- <script src="https://unpkg.com/@barba/core"></script>
<script src="https://cdn.jsdelivr.net/npm/@barba/core"></script> -->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.2.3/howler.min.js"></script> -->
<!-- <script crossorigin="anonymous"
src="https://polyfill.io/v3/polyfill.min.js?features=default%2CArray.prototype.find%2CIntersectionObserver"
></script> -->
<script src="MS.js"></script>
<script src="audio.js"></script>
<script src="portforio.js"></script>
</body>
</html>
例）
```ruby
def greet
puts Hello World
end
自分で試したこと
確認はVS Codeの拡張機能のLive Serverを使用しています。
Next.jsはLive Serverでは動かないんでしょうか？
サーバーについての知識が学習不足でありません。
因みにNext.jsのサーバーでコンポーネント自体は動く事を確認しました。問題は既存のHTMLにインクルードした状態で動作するかの確認がエラーによって出来ません。インクルードの方法が間違ってるのでしょうか？
0
