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。 什么可能导致图像显示 localhost 但不在 Heroku 产品构建中？

package.json

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

文件结构

components
pages
public

Answer 1

我遇到了同样的问题。 对我来说，问题根本不是组件。 我在 Netlify 上托管我的网站，但我没有意识到默认情况下 Netlify 会构建 devDependencies。 因此，用于开发/测试的节点包意外地被编译用于生产。

我将NODE_ENV （在 Netlify 中）更改为production环境，并重新组织了dependencies项和devDependencies之间的包......并且错误消失了。

我认为组件触发了这个问题，因为初始请求导致它们在服务器端生成/优化。 所以即使构建成功。 远程图像请求导致开发包在错误的上下文中运行。

我希望有一天这对其他人有所帮助。

Answer 2

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

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

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

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

我忘记了配置 express 的确切方法，但我猜要么：

应该做的伎俩。 只需将server.use(express.static(path.join(__dirname, 'public')))放在那里。

Answer 3

在根文件夹中为图像创建一个目录，然后从那里相对导入。 行得通。

Answer 4

这方面有几篇文章，但基本上Sharp是必需的，应该安装。 NextJS 文档中的措辞使它听起来是可选的，但对于默认加载器， Sharp 是必需的。