Next.js 公共图像未在生产版本中显示

Question

我有一个 Next.js 应用程序正在部署到 Heroku。当我在本地开发时，我看到图像，但是当我推送到 Heroku 并检查站点时，图像出现 404。我有一个公共文件夹，其中图像 (.png) 就在文件夹中，以及我引用的代码像这样的图像

<Image
    src="/wb_blue_white.png"
    alt="WB Concept"
    width="70"
    height="70"
    className={navStyles.logo}
/>

无论是本地还是在产品中，如果我查看图像源，它们都是相同的src="/_next/image?url=%2Fwb_blue_white.png&w=256&q=75"，但我在产品中得到 404。是什么导致图像显示在本地主机上，但不在 Heroku prod 构建中？

包.json

"scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start -p $PORT"
},

文件结构

components
pages
public

Answer 1

查看下一个自定义服务器文档及其示例存储库。

在这个用于配置服务器的看起来很明确的代码中，app.render()似乎正在为 nextjs 设置路由page，即/ato pages/a。我不确定每条路径是否都需要这样做或出于演示目的而完成。尝试摆弄一下。

无论如何，如果它类似于基本的 Express 服务器，我怀疑use()Express 实例上的方法将添加一个“中间件”，它 1. 接受请求，2. 将其传递给下一个中间件，或将响应发送给客户端。

使用server.use(express.static(path.join(__dirname, 'public')));，server在这种情况下，express 实例在哪里，幸运的是（实际上是约定）在示例存储库中，您可以添加处理静态文件服务的中间件。

我忘记了配置 Express 的确切方法，但我猜测：

• 实例化之后express()，或者
• 就在之前listen()

应该可以解决问题。就server.use(express.static(path.join(__dirname, 'public')))放在那里吧。