Next.js and Bunny CDN: Complete Guide to Image Uploading with Server Actions

1. next-bunny-cdn

   1 1 1 3.9 TypeScript

   Next.js and Bunny CDN: Using server actions for image uploading

   

   Since the tutorial focuses only on image uploading, server actions and using bunny CDN, I won't make a full guide on set up. You can either clone the repository or just setup everything by yourself in the way you like. Just make sure you have a Next.js with app router ready to use before diving deeper 😉

2. SaaSHub

   www.saashub.com featured

   SaaSHub - Software Alternatives and Reviews. SaaSHub helps you find the best software and product alternatives

   

3. nanoid

   2 90 26,814 8.1 JavaScript

   A tiny (118 bytes), secure, URL-friendly, unique string ID generator for JavaScript

   

   Last thing left is to use our new upload function in our server action. Since I like to upload images in single format and have some more control over them, I will additionally use sharp library. For file name, I'll generate some random string using nanoid:

4. valibot

   3 19 8,739 9.7 TypeScript

   The modular and type safe schema library for validating structural data 🤖

   

   I'll use Valibot library, which is a pretty new and cool library for schema validation, similar to Zod.

5. sharp

   4 118 32,282 8.6 JavaScript

   High performance Node.js image processing, the fastest module to resize JPEG, PNG, WebP, AVIF and TIFF images. Uses the libvips library.

   

   Last thing left is to use our new upload function in our server action. Since I like to upload images in single format and have some more control over them, I will additionally use sharp library. For file name, I'll generate some random string using nanoid:

Suggest a related project