NextJS静态导出后嵌套页面无法加载HOC布局中的静态资源

这个问题我之前也踩过坑，核心原因是静态导出后，根页面和嵌套页面的URL层级不同，导致布局组件里的相对路径图片解析错误。

问题诊断 #

开发环境（npm run dev）下，Next.js的开发服务器会帮你统一处理静态资源的路径解析，不管页面层级如何，都能正确找到static目录下的资源。但执行next build && next export后，生成的是纯静态HTML文件：

• 根页面index.html在根目录，布局里的相对路径（比如../static/logo.png）会被解析为根目录下的static/logo.png，所以正常显示。
• 嵌套页面products/test.html在products子目录，布局里的相对路径会被浏览器解析为products/static/logo.png——这个路径根本不存在，所以图片加载失败。

而你页面内的../../static/test.jpg能正常显示，是因为它是从products/test.html往上跳两级到根目录，刚好命中正确的资源路径，但这种写法只适用于当前层级的页面，没法复用在全局布局里。

解决方案：改用绝对路径引用静态资源 #

不管是用旧版的static目录还是新版的public目录（Next.js 9.3+推荐），都直接用根绝对路径来引用图片，这样所有页面都会从根目录开始查找资源，不会受页面层级影响。

步骤1：修改布局组件里的图片路径

假设你的Navbar或Footer里的图片原来用的是相对路径，比如：

// 错误写法（相对路径）
<img src="../static/navbar-logo.png" />

改成绝对路径：

// 正确写法（绝对路径）
<img src="/static/navbar-logo.png" />

如果是用Next.js 9.3+的public目录（推荐，static目录已被逐步废弃），把图片放到public/images/下，然后引用：

<img src="/images/navbar-logo.png" />

步骤2：验证静态导出效果

重新执行next build && next export，生成out目录后，不管是打开根页面还是嵌套页面，布局里的图片都能正常加载了。

额外提示 #

如果你的静态站点需要部署在子路径下（比如https://example.com/my-app/），可以在next.config.js里配置basePath，然后结合环境变量拼接路径，比如：

// next.config.js
module.exports = {
  basePath: '/my-app',
  trailingSlash: true, // 静态导出建议开启，避免路径解析问题
}

// 组件里引用图片
<img src={`${process.env.NEXT_PUBLIC_BASE_PATH}/images/navbar-logo.png`} />

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