Next.js Image Component Resizing Issue in Production

Link to the code that reproduces this issue

To Reproduce

Implement the Next.js Image component in a page using the app router. Observe the image resizing behaviour in the development environment. Deploy the application to the production environment. Observe the image resizing behaviour in the production environment.

Current vs. Expected behavior

There appears to be an inconsistency with the Next.js Image component when using the app router. Specifically, in the development environment, images are resized appropriately for smaller screens, but this behaviour does not persist in the production environment.

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP Fri Mar 29 23:14:13 UTC 2024
  Available memory (MB): 15872
  Available CPU cores: 12
Binaries:
  Node: 21.7.3
  npm: 10.8.0
  Yarn: 1.22.22
  pnpm: 9.1.4
Relevant Packages:
  next: 14.2.3 // There is a newer version (14.2.4) available, upgrade recommended!
  eslint-config-next: 14.2.3
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.4.5
Next.js Config:
  output: standalone

Which area(s) are affected? (Select all that apply)

Image (next/image)

Which stage(s) are affected? (Select all that apply)

Other (Deployed)

Additional context

I am running Nextjs in Docker on a Digital Ocean VPS. Sharp is installed in the project.

Screenshot 2024-07-09 211901 Screenshot 2024-07-09 211931

vercel / next.js