Differing public asset behaviour on dev / prod

Feedback
1

On dev, loading an image from the public folder with incorrect casing is possible. On prod, it’s a 404 error.

Example: you have a flag in your public folder under flags/1x1/us.svg. On dev, you can load the image: <Image src="/flags/1x1/US.svg" /> (notice the incorrect casing here!). On prod, the image is not loaded.

The severity should be obvious. In no case should the dev environment differ from the prod environment. It leads to unexpected bugs.

4

This is a common difference between development and production environments. During development, Next.js runs on your local file system, which can be case-insensitive (especially on macOS or Windows). In production, though, Vercel uses a case-sensitive file system. So file name casing really matters.

In your example, if the file is named us.svg, make sure your code references it exactly as /flags/1x1/us.svg (not /flags/1x1/US.svg).

To avoid running into this again, you can:

  • Use a linter or static analysis tool to catch case mismatches early
  • Test your build locally with next build && next start, which behaves more like production
  • Stick to consistent naming conventions, using all lowercase for public assets is usually safest