Nextjs での JQuery JS スクリプト読み込みを使用する

1. ページにインポート

import Script from "next/script";

2. public ディレクトリに配置した JS コードを導入します

<Script src="/asset/js/common/jquery-3.6.0.min.js"/>
<Script strategy="lazyOnload">
       $("#xxml").css("color","red").css("font-size","20px");
</Script>

Strategy 属性は JS スクリプトのロード順序に影響することに注意してください。JQuery スクリプトが最初にロードされていることを確認してください。詳細については、公式ドキュメントを参照してください。

基本機能: スクリプトの最適化 | Next.js | Next.js 中国語 Web サイト

他の JS スクリプトの読み込みも同様です。