Next.js 14报错：Module not found: Can't resolve './${bgUrl}' 求排查

原因分析 #

这个错误是因为Next.js的构建工具（Webpack/Turbopack）在编译阶段会尝试解析静态资源路径，当你用React状态变量动态设置背景图URL时，构建工具无法提前确定具体的文件路径，会误把${bgUrl}当成字面量路径去解析，自然找不到对应的文件。

另外注意：你的代码里<div>标签未闭合，这会导致语法错误，记得补上</div>。

解决方案 #

根据图片存放位置，分两种情况处理：

1. 图片放在public目录下（比如public/images/bg.jpg） #

直接使用绝对路径是正确的，因为public目录下的资源会作为静态资源部署，运行时由浏览器直接请求，不会被构建工具预解析。如果仍报错，尝试清理构建缓存：

• 删除.next文件夹
• 或执行npm run build --clean

修正后的代码：

'use client'
    
import { useState } from 'react'
    
export default function HomePage(){
    const [bgUrl, setBgUrl] = useState('/images/bg.jpg')

    return (
        <div 
            className={`relative h-full w-full overflow-hidden bg-no-repeat bg-cover bg-center`}
            style={{backgroundImage:`url(${bgUrl})`}}
        >
        </div>
    )
}

2. 图片放在src目录下（比如src/app/images/bg.jpg） #

这种情况需要通过import导入图片，让构建工具追踪到资源并处理（比如优化文件名、生成正确的资源URL），再将导入的变量作为状态初始值：

'use client'
    
import { useState } from 'react'
import bgImage from './images/bg.jpg' // 根据实际路径调整
    
export default function HomePage(){
    const [bgUrl, setBgUrl] = useState(bgImage)

    return (
        <div 
            className={`relative h-full w-full overflow-hidden bg-no-repeat bg-cover bg-center`}
            style={{backgroundImage:`url(${bgUrl})`}}
        >
        </div>
    )
}

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