NextJS静态导出后资源路径指向C盘根目录，如何修改为相对路径？

NextJS默认静态导出时资源引用为站点根绝对路径，本地直接打开HTML文件时，根路径会映射为磁盘根目录，因此出现资源加载失败问题，可通过修改配置解决：

步骤1：修正合并next.config.js配置 #

你现有配置存在两次module.exports赋值问题，后者会覆盖前者的reactStrictMode配置，需合并所有配置项到withOptimizedImages入参中，同时添加两个核心配置：

• assetPrefix: './'：所有静态资源引用前缀改为相对当前HTML文件的路径
• trailingSlash: true：路由生成时自动添加末尾斜杠，避免相对路径跳转异常

完整配置如下：

const withOptimizedImages = require('next-optimized-images');

module.exports = withOptimizedImages({
    reactStrictMode: true,
    // 资源相对路径核心配置
    assetPrefix: './',
    // 路由适配相对路径配置
    trailingSlash: true,
    handleImages: ['jpeg', 'png', 'svg'],
});

步骤2：重新执行构建导出命令 #

执行原有导出命令即可：
next build && next export -o stable-build

注意事项 #

如果你的代码中存在手动写死的绝对路径资源引用（比如直接写src="/xxx.png"引用public目录资源），需要对应改为相对路径写法，否则该类资源仍会走绝对路径加载。

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