NextJS app caching gives error when deployed to app engine

Description : I have created a NextJS App and deployed it to Google App Engine.
Problem : When NextJS tries to cache the images and store it, app engine throws this error.

DEFAULT 2024-09-15T11:48:52.646123Z path: '/workspace/.next/cache/images'
DEFAULT 2024-09-15T11:48:52.646109Z syscall: 'mkdir',
DEFAULT 2024-09-15T11:48:52.646097Z code: 'ENOENT',
DEFAULT 2024-09-15T11:48:52.646093Z errno: -2,
DEFAULT 2024-09-15T11:48:52.646090Z at async /workspace/node_modules/next/dist/lib/batcher.js:45:32 {
DEFAULT 2024-09-15T11:48:52.646086Z at async /workspace/node_modules/next/dist/server/response-cache/index.js:121:25
DEFAULT 2024-09-15T11:48:52.646083Z at async ImageOptimizerCache.set (/workspace/node_modules/next/dist/server/image-optimizer.js:436:13)
DEFAULT 2024-09-15T11:48:52.646078Z at async writeToCacheDir (/workspace/node_modules/next/dist/server/image-optimizer.js:177:5)
DEFAULT 2024-09-15T11:48:52.646074Z at async Object.mkdir (node:internal/fs/promises:858:10)
DEFAULT 2024-09-15T11:48:52.646063Z ⨯ Failed to write image to cache Cyx4zJYF-A+sCaU4OaW1aqTtDqQ+UHD0kNi0DjBpqPk= Error: ENOENT: no such file or directory, mkdir '/workspace/.next/cache/images'
DEFAULT 2024-09-15T11:48:51.333178Z }

While I understand error is because App Engine is read-only, but I really don’t know how to solve it.

What I tried : I have changed my next.js.config to this

const nextConfig = {
...
  distDir: path.join('/tmp', '.next'),
  async headers () {
    return [
      {
        source: '/images/(.*)',
        headers: [
          {
            key: 'Cache-Control',
            value: 'public, max-age=31536000, immutable'
          }
        ]
      }
    ]
  }
...
}