How to display images using nextjs custom-server-express in production?

Question

I have nextjs custom server express.

I am able to display images in development mode but when I try in production I'm getting 400 Bad Request

This is my custom express server:

const express = require('express')
const next = require('next')
const path = require('path')

const port = parseInt(process.env.PORT, 10) || 3000
const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()

app.prepare().then(() => {
  const server = express()

  server.use(express.static(path.join(__dirname, './public')))
  server.use('/_next', express.static(path.join(__dirname, './.next')))

  server.all('*', (req, res) => {
    return handle(req, res)
  })

  server.listen(port, (err) => {
    if (err) throw err
    console.log(
      `> Ready on http://localhost:${port} with env ${process.env.NODE_ENV}`
    )
  })
})

So On my client-side, I'm using next/image which gives me the errors I have

<Image
  src={data && data.image}
  alt='avatar'
  className='img-fluid rounded-circle'
  width={200}
  height={200}
  />

But when I use img tag it is fine even in the production

 <img
   src={data && data.image}
   alt='avatar'
   className='img-fluid rounded-circle'
   width={200}
   height={200}
   />

If I restart the server again I can see images, so it is required to restart everytime I update any image.