我有一个Next.js应用程序，我正在部署到Heroku。当我在本地开发时，我看到了这些图像，但是当我推送到Heroku并检查网站时，这些图像有404。我有一个公共文件夹文件夹中有图片(。png)我引用图片的代码是这样的
<Image
src="/wb_blue_white.png"
alt="WB Concept"
width="70"
height="70"
className={navStyles.logo}
/>
本地和在prod，如果我看图像源，他们是相同的src="/_next/image?url=%2Fwb_blue_white.png&w=256&q=75"，但我得到一个404在prod。是什么可能导致图像显示本地主机，而不是在Heroku prod构建?
package.json
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start -p $PORT"
},
components
pages
public
查看下一个自定义服务器文档及其示例repo。
在这个用于配置服务器的表达式代码中，app.render()似乎正在为nextjspage设置路由，即/a到pages/a。我不确定每个路径是否都需要这样做，或者只是为了演示。试着摆弄一下。
无论如何，如果它类似于基本的express服务器，我怀疑，express实例上的use()方法将添加一个"中间件"，其中1。接收请求和2。将其传递给下一个中间件，或将响应发送给客户端。
对于server.use(express.static(path.join(__dirname, 'public')));，其中server在本例中是express实例，幸运的是(实际上是惯例)在示例repo中也是如此，您可以添加处理静态文件服务的中间件。
我已经忘记了配置express的确切方法，但我猜要么:
- 紧跟在
express()实例化之后，或者 - 在
listen()前面
应该可以解决这个问题。把server.use(express.static(path.join(__dirname, 'public')))放在这里。
我也有同样的问题。对我来说，问题根本不是组件。我在netflix上托管我的网站，我没有意识到默认情况下netflix会构建devDependencies。因此，用于开发/测试的节点包被意外地编译为生产。
我将NODE_ENV(在netflix中)更改为production，并重新组织了dependencies和devDependencies之间的软件包…错误消失了。
我认为组件触发了这个问题，因为初始请求导致它们在服务器端生成/优化。所以即使构建成功了。远程映像请求导致开发包在错误的上下文中运行。
我希望这有一天能帮助到别人。
在根文件夹中为图像创建一个目录，并相对地从那里导入。
这方面有几篇文章，但基本上夏普是必需的，应该安装。NextJS文档中的措辞让它听起来像是可选的，但在默认加载器中，Sharp是必需的。
在我的例子中，我在.dockerignore中有public文件夹，结果所有的静态资产都被忽略了。希望能帮到别人。