NextJS 14+Plaiceholder+Sharp部署Vercel时构建失败求助
Next.js 14.0.3 图片模糊组件部署Vercel失败问题
我在使用Next.js 14.0.3的Image组件实现动态图片模糊效果时,本地运行一切正常,但部署到Vercel时出现构建失败,报错信息如下:
corrupted size vs. prev_size Error: Command "npm run build" exited with SIGABRT
已尝试的解决方案
- ✅ 升级Plaiceholder和Sharp至最新版本并遵循官方文档操作,仍触发上述构建失败错误
- ✅ 将Sharp降级至0.32.6,出现超时错误:
Task timed out after 10.01 seconds
注:该超时错误疑似与Prisma数据获取相关,但移除Sharp和Plaiceholder依赖后,Vercel部署可正常完成。
相关组件代码
模糊图片组件的实现代码如下:
import Image, { ImageProps } from "next/image"; import { getPlaiceholder } from "plaiceholder"; export default async function BlurImage({ src, alt, ...rest }: ImageProps) { if (typeof src !== "string") return <Image src={src} alt={alt} {...rest} />; const buffer = await fetch(src).then(async (res) => Buffer.from(await res.arrayBuffer()) ); const { base64 } = await getPlaiceholder(buffer); return ( <Image alt={alt} src={src} placeholder='blur' blurDataURL={base64} {...rest} /> ); }
内容的提问来源于stack exchange,提问作者Reza Attar
相关产品推荐
相关产品推荐

