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

• next-bunny-cdn

  1 1 4.7 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 😉

• nanoid

  83 23,227 8.4 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:

• SurveyJS

  surveyjs.io featured

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• valibot

  6 5,183 9.9 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.

• sharp

  97 27,987 9.4 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