Next.js v9.0.2生成静态文件资源路径错误及配置异常求助

问题核心 #

你遇到的矛盾点在于：想通过assetPrefix: "."设置相对资源路径，但next/font强制要求assetPrefix必须是带前导斜杠的路径或绝对URL，导致编译报错；同时默认生成的静态资源路径是绝对的/_next/static/...，若部署在非根目录下会找不到资源。

解决方案 #

根据是否保留next/font，分两种处理方式：

方式一：保留next_font，用绝对子路径配置

如果需要继续使用next/font的字体优化能力，不能用相对路径"."，需按部署路径配置绝对前缀：

1. 打开next.config.js，设置assetPrefix为你的站点部署子路径（比如部署在https://xxx.com/my-site/，就填"/my-site"）：

module.exports = {
  assetPrefix: "/my-site",
  // v9.0.2静态导出需配置exportPathMap，预定义所有页面路径
  exportPathMap: () => ({
    "/": { page: "/" },
    // 按需添加其他页面，比如"/about"对应{ page: "/about" }
  }),
};

2. 执行next build && next export，生成的out文件夹中资源路径会自动带上/my-site/_next/static/...前缀
3. 部署时将out目录的所有文件放到服务器的/my-site目录下，资源就能正确加载

如果你的站点部署在根目录，完全不需要设置assetPrefix，默认的/_next/static/...路径会直接指向out/_next/static下的文件，不会有问题。

方式二：放弃next_font，用相对路径配置

如果必须用相对路径适配任意部署目录，可以移除next/font，改用传统方式引入字体：

1. 将字体文件放到public/fonts目录下
2. 在全局样式文件（比如styles/globals.css）中用@font-face引入：

@font-face {
  font-family: "CustomFont";
  src: url("../fonts/custom-font.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}

3. 修改next.config.js为：

module.exports = {
  assetPrefix: ".",
  exportPathMap: () => ({
    "/": { page: "/" },
    // 按需添加其他页面
  }),
};

4. 执行next build && next export后，所有资源路径都会变成./_next/static/...，无论部署在哪个目录下都能正确加载

注意事项 #

Next.js v9.0.2的next export只支持预定义的静态页面，动态路由需要通过exportPathMap提前生成对应静态文件，复杂的动态逻辑可能无法正常导出。

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