Next.js引入flowbite.min.js报404错误，求正确本地文件路径

问题原因 #

你直接引用../node_modules/flowbite/dist/flowbite.min.js会出现404，是因为Next.js不会把node_modules目录作为静态资源目录对外提供访问，浏览器无法直接请求这个路径下的文件。

解决方案（二选一，无需使用flowbite-react） #

方案1：通过ES模块直接导入（推荐） #

Next.js支持直接从node_modules导入脚本模块，不需要手动处理路径。修改你的_app.js代码：

import Script from 'next/script'
import '~/styles/globals.css'
// 直接导入flowbite的JS文件，Next.js会自动打包处理
import 'flowbite/dist/flowbite.min.js'

export default function App({Component, pageProps}) {
  return (
    <>
      <Component {...pageProps} />
    </>
  )
}

如果需要控制脚本在body末尾加载（符合Flowbite文档建议），可以结合Script组件的加载策略：

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

export default function App({Component, pageProps}) {
  return (
    <>
      <Component {...pageProps} />
      {/* strategy属性控制脚本在body末尾加载 */}
      <Script src="flowbite/dist/flowbite.min.js" strategy="beforeInteractive" />
    </>
  )
}

注：这里的src直接写包内路径即可，Next.js会自动解析node_modules中的文件。

方案2：复制文件到public目录 #

如果你更倾向于用静态资源方式引入：

1. 在项目根目录的public文件夹下创建js子目录（无则新建）
2. 从node_modules/flowbite/dist/flowbite.min.js复制文件到public/js/目录下
3. 修改_app.js中的Script组件路径：

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

export default function App({Component, pageProps}) {
  return (
    <>
      <Component {...pageProps} />
      {/* public目录下的文件直接用根路径访问 */}
      <Script src="/js/flowbite.min.js" strategy="beforeInteractive" />
    </>
  )
}

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