如何在Next.js中加载本地JS文件实现基础JavaScript功能

你遇到的404报错核心原因是本地静态JS文件存放位置错误：Next.js 仅会将public目录下的文件作为可公开访问的静态资源对外提供服务，放在根目录、app、pages、components等其他目录下的文件不会生成可访问的静态路由，Script组件请求时自然会返回404。

具体操作步骤 #

1. 调整JS文件存放位置 #

• 项目根目录下如果没有public文件夹，先手动新建该文件夹
• 将你写好的包含滚动监听逻辑的JS文件（例如命名为scroll-listener.js）移动到public目录内，文件内容保持原有逻辑即可：

document.addEventListener("scroll", function () {console.log("scroll!")})

注意：引用public目录下的资源时，路径直接从根路径/开始写，不要带public前缀，否则会路径错误。

2. 使用Next.js官方Script组件加载脚本 #

根据你使用的路由模式，在需要生效的页面或全局布局中引入即可：

• App Router（Next.js 13+ 默认路由模式）示例：

import Script from 'next/script'

export default function RootLayout({ children }) {
  return (
    <html lang="zh-CN">
      <body>
        {children}
        {/* 全局生效的滚动监听脚本放在根布局即可 */}
        <Script src="/scroll-listener.js" strategy="afterInteractive" />
      </body>
    </html>
  )
}

• Pages Router 示例：

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

function MyApp({ Component, pageProps }) {
  return (
    <>
      <Component {...pageProps} />
      <Script src="/scroll-listener.js" strategy="afterInteractive" />
    </>
  )
}

export default MyApp

常见踩坑提示 #

• 不要将需要静态加载的JS文件放在业务代码目录（app/pages/components等），这类目录走Next.js的编译和路由逻辑，不会直接作为静态资源返回
• 如果JS文件放在public的子目录，例如public/scripts/scroll-listener.js，对应src路径要写为/scripts/scroll-listener.js
• 滚动监听类的交互脚本strategy参数选afterInteractive即可，会在页面可交互后加载，不影响首屏加载速度

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