下一个导出脚本不适用于下一个/图像组件

Question

我有一个项目。我想构建并导出它，但出现错误。

这是我在package.json 文件中的构建脚本。

"scripts": {
    "build": "next build && next export"
}

这是我正在使用的组件next/image

import Image from 'next/image'

export default function Logo(){
    return(
        <Image 
            src={process.env.website_url ? (process.env.website_url + "/img/logo/logo1.png") : "/img/logo/logo1.png" } 
            width={width} 
            height={height}
            alt="logo"
        />
    )
}

这是我想构建项目时的错误：

Error: Image Optimization using Next.js' default loader is not compatible with `next export`.

那么，我现在该怎么办。我应该使用不同的装载机还是什么？谢谢。

编辑：我创建了一个 server.js 文件并修改了 package.json 脚本。

Server.js 文件：

const express = require('express')
const server = express()
const next = require('next')
const dev = process.env.NODE_ENV !== 'production'

const app = next({dev})
const handle = app.getRequestHandler()
const port = 3000

app.prepare().then(()=>{

  server.get('*', (req, res)=>{
    return handle(req,res)
  })

  server.listen(port, (err) => {
    if(err) console.log(err)
    console.log(`SERVER SUCCESS: ${port}`)
  })

}).catch((e)=>{

  console.log(e.stack)
  process.exit(1)
  
})

package.json 文件中的脚本：

"scripts": {
    "dev": "node server.js",
    "build": "next build",
    "start": "node server.js"
  }

服务器在本地主机上工作，但不在主机上工作。出现 503 服务不可用错误。

Answer 1

next export 仅适用于静态页面。所以 next/image 是由下一次启动的服务器优化和加载的图像（它们是按需而不是构建的图像）。 next start 启动具有图像优化 API 的服务器。这就是它无法导出的原因。尝试使用其他图像加载服务。您也可以尝试只构建下一个 js（下一个构建）而不使用下一个导出，并使用下一个启动来启动将处理图像优化的服务器。

您还可以配置自己的加载程序以进行图像优化。参考这些：

Loader reference

next-optimized-images

Next JS Doc message