Troubleshoot NextJS Image Optimization not working on Contentstack Launch

Problem Statement

NextJS image optimization is a useful feature to optimize images for the web. A common use case is to optimize various image formats to a web optimized format like webp.

You may face an issue where the image optimization works when testing locally, but does not work when deploying to Launch.

Root Cause

NextJS requires installing the sharp library in production for image optimization. The latest version of sharp (>= 0.33.0) does not get included in the build due to a bug in vercel/nft.

Steps to Resolve

Explicitly install an older version of sharp as follows:

npm install sharp@0.32.6

or add the dependency in your package.json:

"sharp": "0.32.6"

We also recommend using Contentstack's image delivery API instead for better performance and many other features.