如何在React（Next.js）项目中引入Public目录下的JS文件？

问题根源 #

1. 路径错误：public是Next.js的静态资源根目录，访问其中的文件时路径要从根目录（/）开始，而非相对路径../js/...。
2. 未使用官方推荐的加载方式：直接用原生<script>标签可能引发加载时机问题，Next.js提供的Script组件能更好适配框架的渲染逻辑，控制脚本加载策略。

修正步骤 #

1. 调整JS文件引入方式：使用next/script提供的Script组件，指定正确的根路径。
2. 优化CSS导入（可选）：public文件夹中的CSS建议通过link标签在Head中引入，或移至styles文件夹后导入，避免路径混淆。

修正后的_app.js代码 #

import '../styles/globals.css'
import Script from 'next/script'
import Head from 'next/head'

function MyApp({ Component, pageProps }) {
  return (
    <>
      <Head>
        {/* 若CSS存于public，用link标签引入更规范 */}
        <link rel="stylesheet" href="/css/style.css" />
        <link rel="stylesheet" href="/css/fonts.css" />
        <link rel="stylesheet" href="/css/bootstrap.css" />
        <link rel="stylesheet" href="/css/fonts2.css" />
      </Head>
      {/* 使用Next.js Script组件，路径从根目录开始 */}
      <Script src="/js/core.min.js" />
      <Script src="/js/script.js" />
      <Component {...pageProps} />
    </>
  );  
}

export default MyApp

额外说明 #

• 如果JS脚本需要等待DOM加载完成后执行，可给Script组件添加加载策略属性，比如：

  <Script src="/js/script.js" strategy="lazyOnload" />
  

• 确认public文件夹结构正确：public/js/core.min.js和public/js/script.js文件确实存在，路径拼写无错误。

内容的提问来源于stack exchange，提问作者amit