NextJS 14.1.3项目导入外部JS库文件失败求助

数据老陈

2026-6-27

解决NextJS 14.1.3中next/script导入本地JS文件找不到的问题

核心问题：静态资源路径错误

NextJS的public目录是项目的静态资源根目录，引用该目录下的文件时，不需要在路径中添加/public前缀，Next会自动从public目录开始查找资源。你当前的路径/public/js/xxx.js会导致Next去寻找不存在的public/public/js/xxx.js路径，因此报文件找不到错误。

修改后的代码

将Script组件的src路径去掉/public前缀：

import Script from 'next/script';

render() {
    const {Component, pageProps}: any = this.props;
    const stores = getStores();

    return (
        <StoreProvider value={stores}>
            <Script
                src='/js/LunaPass.1.6.8.js'
                strategy="beforeInteractive"
            />
            <Script
                src='/js/LPMessageRenderer.1.6.8.js'
                strategy="beforeInteractive"
            />
            <Component {...pageProps} />
        </StoreProvider>
    );
}

额外注意事项

文件路径校验：确认你的JS文件确实存放在项目根目录的public/js/文件夹下，文件名（包括版本号、大小写）完全匹配，Linux/macOS环境下文件名大小写敏感，要格外注意。
脚本加载时机：beforeInteractive策略会在页面HTML渲染前加载脚本，适合全局可用的工具类脚本。如果你的脚本需要依赖React组件挂载后的状态，可以考虑切换为afterInteractive或lazyOnload策略。
全局变量访问：脚本加载完成后，若要在React组件中调用脚本暴露的全局变量（比如LunaPass），直接通过window.LunaPass访问即可。如果需要确保脚本加载完成后再执行逻辑，可以使用Script组件的onLoad回调：
```
<Script
    src='/js/LunaPass.1.6.8.js'
    strategy="beforeInteractive"
    onLoad={() => {
        // 脚本加载完成后执行初始化或调用逻辑
        window.LunaPass.init();
    }}
/>
```