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. SurveyJS

   surveyjs.io featured

   JavaScript Form Builder with No-Code UI & Built-In JSON Schema Editor. Keep full control over the data you collect and tailor the form builder’s entire look and feel to your users’ needs. SurveyJS works with React, Angular, Vue 3, and is compatible with any backend or auth system. Learn more.

   

3. nanoid

   2 87 25,882 8.6 JavaScript

   A tiny (124 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 16 7,772 9.8 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 111 30,818 9.0 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