Next.js 12中如何导入本地JS文件？解决导入报错问题

先排查可能的操作失误 #

• 静态文件位置错误：必须把js.js放在项目根目录的public文件夹下，不是src子目录里的public。正确的项目结构应该是：

  your-next-app/
  ├── public/
  │   └── js.js
  ├── src/
  │   └── pages/
  │       └── index.js
  └── package.json
  

• 路径拼写错误：确保引用路径是/js.js（根路径），不是相对路径如./js.js或../js.js，也不要加public前缀（Next.js会自动映射public目录到根路径）
• 缓存问题：重启Next.js开发服务器，或者用Ctrl+F5强制刷新浏览器，避免旧缓存导致的404
• 文件名大小写问题：确认文件名是js.js，不是JS.js或Js.js（部分系统区分大小写）

正确的导入方法 #

方法1：使用Next.js官方Script组件（推荐） #

Next.js 11+提供了next/script组件，专门用来加载外部脚本，同时避免同步脚本警告。步骤如下：

1. 在组件中导入Script：

   import Script from 'next/script'
   

2. 用指定加载策略的方式引入脚本：

   export default function Home() {
     return (
       <>
         {/* 根据脚本用途选择合适的策略 */}
         {/* lazyOnload：浏览器空闲时加载，适合非关键脚本 */}
         <Script src="/js.js" strategy="lazyOnload" />
         {/* afterInteractive：页面可交互后加载，适合需要较快执行但非立即的脚本 */}
         {/* <Script src="/js.js" strategy="afterInteractive" /> */}
         {/* beforeInteractive：页面 hydration 前加载，适合全局工具类脚本 */}
         {/* <Script src="/js.js" strategy="beforeInteractive" /> */}
       </>
     )
   }
   

方法2：模块化导入（如果脚本支持ES模块） #

如果你的js.js是可模块化的脚本（比如有export语句），可以直接在组件中导入：

// 假设js.js在src/utils目录下
import '../utils/js.js'

export default function Home() {
  return <h1>Home Page</h1>
}

方法3：全局加载（所有页面生效） #

如果需要脚本在所有页面生效，可以在_app.js或_document.js中使用Script组件：

// pages/_app.js
import Script from 'next/script'
import '../styles/globals.css'

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

export default MyApp

为什么之前的方式出错？ #

• 使用自定义的<Script>标签：你可能没导入Next.js官方的Script组件，而是自己写了同名标签，导致Next.js无法处理，出现404
• 普通<script>标签：默认是同步加载，Next.js为了性能优化会抛出"Synchronous scripts should not be used"警告，必须使用官方Script组件并指定异步加载策略

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