For a high-traffic Next.js app, I’m looking for a solution outside of the Vercel ecosystem that’s affordable. I don’t think hosting directly on the app is viable since Next’s image optimization tool is still quite expensive $$$ regardless of caching.
Do you have favorite best practices or solutions for uploading, hosting, &amp; caching image files? I’d love to know!

The official daily.dev web development community. Led by thought leaders and webdev experts. Join the Squad!

WebDev

Looking for affordable object storage solutions outside of Vercel for a high-traffic Next.js app. Seeking recommendations for best practices in uploading, hosting, and caching image files due to high costs of Next's image optimization tool.

What's your go-to object storage solution?

This largely depends on your requirements.
If you need to horizontal scale then the best option you can reach for is something like S3 or GCS. If you’re worried about your budget, you can set up budget alerts.
If you don’t need to horizontally scale but still need the high availability and fail-over, you can host a virtual machine mounted with some arbitrarily large storage and use a custom endpoint that writes the blobs to the VM’s filesystem. This would use the disk mounted to the machine as a sort of hard limit to how much you can scale but also how much you’ll spend.

Building your own next/image its not a viable option tho. The way the next/image work is by compresing the image, caching, sometimes locally when you build the Image.
Basically what I would do is whenever users upload an Image, I’ll compress it making lets say wepb and jpeg, but with different pixel size (according to your taste)
For storage right now I’m using R2 (Cloud Flare) beacause it’s cheaper.
And after that to use It, I’ll just use &lt;picture /&gt; element in HTML. This is what I do. But rightnow if I can do that again, I’ll jsut use next/image.
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture" target="_blank" rel="noopener nofollow">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture</a>