filenext.jspublicnextjs-15

NextJs production public dir, serving dynamic assets


I have problem, on dev server i can easily use localhost:3000/uploads/fileName.png and it serves file to frontend, on the other hand when I use production server it does not

<Image src={`/uploads/${product.imageName}`} alt={`${product.imageName}`} width={200} height={20} className="rounded-md"></Image>

The thing is that admin can add images dinamically into directory public/uploads, after adding image it wont serve, reposne is 400: The requested resource isn't a valid image. After i restart (not build) server everything works perfect, could someone explain me what am i doing wrong?


Solution

  • In production, Next.js doesn't detect new files added to the public/ folder after the server starts. That's why your uploaded images return a 400 until you restart.

    Fix: Serve uploads from a separate /uploads folder using a custom server (e.g. Express) or Nginx. Don’t rely on the public/ folder for dynamic content.