javascript - 下一个导出脚本不适用于下一个/图像组件
问题描述
我有一个项目。我想构建并导出它,但出现错误。
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 服务不可用错误。
解决方案
next export
仅适用于静态页面。所以 next/image 是由下一次启动的服务器优化和加载的图像(它们是按需而不是构建的图像)。next start
启动具有图像优化 API 的服务器。这就是它无法导出的原因。尝试使用其他图像加载服务。您也可以尝试仅构建下一个 js(下一个构建)而不使用下一个导出,并使用下一个启动来启动将处理图像优化的服务器。
您还可以配置自己的加载程序以进行图像优化。参考这些:
推荐阅读
- mongodb - mongodb给出错误不是master,复制没有初始化
- bitbucket - 如何在 Bitbucket 管道上使用 Prettier?
- postgresql - 连接到服务器时 Postgres 未运行
- python - 每个张量组的 Keras 自定义损失函数
- cocoapods - 规格存储库中的 CocoaPods 是唯一的官方版本吗?
- javascript - 如何修复未捕获的 SyntaxError:标识符“翻译”已被声明
- javascript - 用 innerHtml 更新值
- python - networkx:如何设置自定义成本函数?
- swift - 一个视图中的 SwiftUI 2 Observable 对象,它们相互依赖
- r - R如何选择特征向量?