File & Image Uploads in Next.js 15 Are Easy Now

👉 Check out Pinata here: https://pinata.cloud/ (paid sponsorship). Disclaimer: this is a sponsored video (paid). It's your responsibility to evaluate safety, accuracy and other relevant parts of the reviewed product.
👉 NEW React & Next.js Course: https://bytegrad.com/courses/professi...

Hi, I'm Wesley. I'm a brand ambassador for Kinde (paid sponsorship).
👉 Check out Kinde for auth and more https://bit.ly/3QOe1Bh

👉 NEW React & Next.js Course: https://bytegrad.com/courses/professi...
👉 Professional JavaScript Course: https://bytegrad.com/courses/professi...
👉 Professional CSS Course: https://bytegrad.com/courses/professi...

👉 Web development roadmap 2024 & 2025: https://email.bytegrad.com
👉 Email newsletter (BIG update soon): https://email.bytegrad.com
👉 Discord: all my courses have a private Discord

⏱️ Timestamps:
00:00 File / Image upload problems
02:06 Example Next.js app
02:43 input with type="file" + styling
06:12 Pinata setup
08:02 import server-only
09:10 isUploading state
09:43 Upload file from browser to API route
11:34 Upload file from API route to Pinata
13:30 Display image with Signed URL
17:01 CDN + Signed URL
18:01 Image optimization (size, webp)
19:38 Next.js Image component
20:47 srcSet
21:52 Custom loader (Pinata)
22:58 Next.js + Pinata stack

#webdevelopment #reactjs #nextjs

Note that my videos may contain mistakes. Always verify yourself that your code is safe and does what you want it to do for your specific situation. You agree by watching the videos that you are solely responsible for any mistakes in your code.

This channel and all its content is owned & operated by ByteGrad Sp. z o.o. with Tax ID: PL6762676561