[SOLVED] Next.js images return 500 error in production

Next.js images return 500 error in production

I am deploying a Next.js app on GAE and none of the images in the public folder get served, they all return 500 with the following error after reviewing logs

EROFS: read-only file system, unlink '/workspace/.next/cache/images/zUb0XWtfOUy8jJS-olwIcsJpEse7wovGYRmT3B79mCc=/0.1641776976898.S-2U16B+8WquUZAAJsKsf1k9FpDiuBJX2T6gFU5eXy4=.svg

Here is how my app.yaml file looks like:

---
handlers:
  - url: /.*
    secure: always
    script: auto
manual_scaling:
  instances: 1
runtime: nodejs16

I run next build to get a production build, however none of the images load. Please help

Solution

It looks like GAE (Google App Engine) does not allow for writing, you can read them but its probably trying to perform some transcoding in the request, e.g: convert to svg

One potential way maybe to host the images in an external URL or use a host like imgix or cloudinary

https://nextjs.org/docs/api-reference/next/image#domains