Serving user uploaded content in NextJS - infrastructure without a CMS
Hey all
I would like users to be able to upload images to posts in my application. Then, I would like to be able to display this on their posts page later on
I would prefer to use Azure Blob Storage - and there are Microsoft libraries to upload and download from blob
But more generally, wondering how you would handle this in terms of infrastructure? Do you fetch the imagine from Blob storage each time the user visits posts page? Or do you cache locally on server?
4 Replies
Where is NextJS itself hosted? I think the easised thing to do is use ISR on Vercel so you get caching on the edge by default. You have the main storage but not the CDN, and Vercel will give you that for free.
If it's not Vercel, it's a bit harder depending on what you are doing. What version of next are you using and are you using app or pages router?
I will be hosting in Vercel yea.
App router, NextJS 14.
Been using server actions to post and fetch user content from mongodb. Now, users will have the ability to upload photos. It seems more intuitive to store these in blob than as BSON in mongo. ISR looks interesting
Yeah, when in doubt, cache, cache, cache.
Tag your images with a uuid on upload and use that for your cache key.
Worth reading this I think https://vercel.com/docs/image-optimization
Vercel Documentation
Image Optimization with Vercel
Vercel has built-in image optimization that automatically serves the optimal image to your visitors