How to Upload Images to a Server in Next.js | Nextjs 13

Web Dev Roadmap for Beginners (Free!): https://bit.ly/DaveGrayWebDevRoadmap

Learn how to upload images to a server in Next.js 13. This project will also be able to upload video, audio, blob, PDF, and text files to a server if you want. The tutorial code uses Nextjs 13 with app router and focuses on uploading images.

💖 Support me on Patreon ➜ https://patreon.com/davegray

⭐ Become a full-stack web dev with Zero To Mastery Courses:
– Complete Next.js Developer: https://bit.ly/CompNextJSDev
– Advanced React: https://bit.ly/AdvReactDev
– Junior to Senior Dev Roadmap: https://bit.ly/WebDevRoadmap-JrtoSr

🚩 Subscribe ➜ https://bit.ly/3nGHmNn

📬 Course Updates ➜ https://courses.davegray.codes/

❓ Questions – Please post them to my Discord ➜ https://discord.gg/neKghyefqh

☕ Buy Me A Coffee ➜ https://www.buymeacoffee.com/davegray

👇 Follow Me On Social Media:
Github: https://github.com/gitdagray
Twitter: https://twitter.com/yesdavidgray
LinkedIn: https://www.linkedin.com/in/davidagray/

🔗 Source Code: https://github.com/gitdagray/nextjs-upload-images

How to Upload Images to a Server in Next.js | Nextjs 13

(00:00) Intro
(00:05) Welcome
(00:29) Today’s topic
(00:44) Create a new Next.js project
(01:25) Add UploadThing to Your Project
(04:07) Add Router structure
(08:40) core.ts, File Router, & File Routes
(15:04) route.ts
(16:32) Upload Button page
(25:10) Upload Dropzone page
(27:20) Dashboard
(28:22) Is UploadThing an S3 Killer?
(30:08) More to Learn

📚 Tutorial References:
🔗 Theo’s UploadThing video: https://youtu.be/mxT3j-5s1Zc
🔗 JoshTriesCoding video: https://youtu.be/yu4KKmNFg2Y
🔗 Next.js Official Site: https://nextjs.org/
🔗 Next.js Docs for Server Actions: https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions
🔗 ES7 React Snippets Extension: https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets

Was this Next.js tutorial about uploading images with UploadThing helpful? If so, please share. Let me know your thoughts in the comments.

#nextjs #upload #images