一个问题 Next.js 给了我 3 种方案，仍未彻底解决...

[qufei1993]

记录下 Next.js 项目开发中遇到的一个 “深坑”。之前做了一个《Next.js 中文教程》项目，发布到 Github Pages 后实际的访问地址是 https://qufei1993.github.io/nextjs-learn-cn。

域名后面跟一个子路径，访问时直接就白屏了。Network 中存在很多资源加载失败的请求。效果如下所示：

本地开发时默认的域名是 http://localhost:8081，没什么问题。接下来就以 http://localhost:8081/docs 为例，子路径是 /docs 开始填坑之旅。

方案一：assetPrefix

从 Next.js 官网找到了一个配置 assetPrefix 从这个命名来看 “资源前缀” 不就是我想要的吗？

于是修改了 next.config.js 文件

module.exports = {
  assetPrefix: 'http://localhost:8081/docs',
}

再次运行后，它对我的 JS、CSS 资源有效，但仍有问题。

方案二：basePath

从 Next.js 的文档，我又找到了 basePath 配置，该配置允许您设置应用程序的路径前缀，并且文档中有提到如果要在域名的子路径下部署 Next.js 应用程序，你就需要这个配置。

再次修改了 next.config.js 文件

module.exports = {
  assetPrefix: 'http://localhost:8081/docs',
  basePath: '/docs',
}

当用 next/link 跳转应用时，该配置会自动应用。例如 <Link href="/about">About Page</Link> 中的 /about 会自动变为 /docs/about。

运行程序后，问题又出现了，图片加载失败。报错如下，很明显图片没有应用上子路径。

方案二：自定义 Image Loader

在一顿疯狂搜索后，有人告诉我可通过自定义图像 loader 实现，在一个统一的入口为图像增加前缀，如下所示：

继续修改 next.config.js 文件

module.exports = {
  assetPrefix: 'http://localhost:8081/docs',
  basePath: '/docs',
  images: {
    loader: 'custom',
    loaderFile: './image-loader.js',
  },
}

新建 image-loader.js 文件

export default function myImageLoader({ src }) {
  return `https://localhost:3000/docs/${src}`
}

但有个前提，以上自定义 loader 方案必须使用 next/image 提供的 Image 组件。因为项目中使用 MUI 组件加载的图像

// 修改前
<Box
  component="img"
  alt="logo"
  src="logo.svg"
  sx={{ width: 30, maxWidth: 30 }}
/>

// 修改后
<Image src={"logo.svg"} width={30} height={30} />

注意，Image 组件必须要有 width、height 属性且类型为 Number，如果想设置为 '100%' 怎么办？抱歉，要自己解决的...

你以为，这就解决了吗？

再次运行后我发现有部分图片加载成功了，还有部分图片加载失败，这些失败的图片是通过 CSS 背景图设置的。

<div style={{ width: '100px', height: '100px',backgroundImage: 'url(/next.svg)' }} > 11111</div>

到这里有点麻木了，一个问题，就没有一个统一的方案，来解决。针对 css 背景图片应用域名子路径，现在还没有看到好的解决方案...

使用 Next.js 过程中，你有遇到类似问题吗？欢迎扫描以下二维码加入 Next.js 技术交流群分享你的经验，吐槽也欢迎 😄