Next.js static assets from public folder vs cloud based storage solutions

Question

In Next.js (or React) usually cloud based storage solutions are used for storing media files like images and, my question is, what stops us from storing images as static assets in public folder and accessing them from there in our app (from client/server components)? Is it that they can not be easily added/ deleted or that the storage for static assets is limited? Thanks

Answer 1

You can serve static assets from the public folder without needing to import them in your JavaScript code. Any files placed in the public folder will serve as static assets from the root of your application.

nothing is stopping you from storing images as static assets in the public folder and accessing them from there in your Next.js application. However, there are some limitations to consider:

Limited Storage: The public folder is intended for small static assets like images, icons, and fonts. If you have a large number of images or other media files, it may not be practical to store them all in the public folder.

Limited Control: When you store images as static assets in the public folder, you have limited control over them. You cannot easily add or delete images without manually modifying the files in the public folder.

Limited Optimization: When you store images as static assets in the public folder, you cannot take advantage of NextJS built-in image optimization features. NextJS provides automatic image optimization for images stored in the public folder, but you need to manually optimize images stored elsewhere.

For these reasons, it's generally recommended to use a dedicated media storage service like AWS S3 for storing images and other media files in a NextJS application.

Answer 2

I was actually asking myself this exact same question. So I compared both methods (public assets folder vs. cloud-based service (Cloudinary)).

I expected the loading time and resource values to be way smaller for the cloud-based solution (network tab console), however, it's exactly the same as when my assets are rendered from the public folder.

So for this reason, and knowing that I won't need to host hundreds of images but around 20-30, I will stick with the public folder.

When images are being uploaded by users though, the images will be stored in an S3 bucket and rendered through a link the backend will send me.

Hope this will help some people.