Next.js 13静态导出异常：构建后页面加载失败求助

1. 修正Next.js配置，适配相对资源路径 #

在next.config.mjs中补充配置，让静态资源使用相对路径，解决本地file://协议下的路径解析问题：

/** @type {import('next').NextConfig} */
const nextConfig = {
    output: "export",
    trailingSlash: true, // 生成带斜杠的目录式结构，确保相对路径解析正确
    assetPrefix: './',    // 给静态资源添加相对路径前缀
};

export default nextConfig;

重新执行npm run build后，生成的/out文件夹内的资源链接会变为相对路径，直接打开index.html即可正常加载资源。

2. 用本地静态服务器测试（更推荐） #

直接通过file://协议打开静态文件容易触发路径解析异常，建议用本地静态服务器测试导出内容：

• 安装serve工具：npm install -g serve
• 启动服务器指向out文件夹：serve out
• 在浏览器访问http://localhost:3000（默认端口），此时资源路径会正常解析，无需修改配置。

额外注意 #

如果网站最终要部署到域名的子路径（比如https://example.com/my-app/），需要添加basePath配置，示例：

const nextConfig = {
    output: "export",
    trailingSlash: true,
    basePath: '/my-app', // 对应部署的子路径
};

同时要注意，静态导出模式下不能使用依赖服务器端渲染的功能（比如getServerSideProps、API路由），这类功能会直接失效。

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