Better Images in Next.js with Cloudinary
Cloudinary provides powerful transformation APIs so you don’t have to waste time fiddling with images. Colby Fayock has a new library for Next.js to make it even easier.
'
00:00:00 - Welcome
00:01:11 - Who is Colby Fayock?
00:03:30 - A high-level overview of Cloudinary
00:04:48 - How Cloudinary helps run Learn with Jason?
00:09:50 - The great equalizers and undifferentiated labor
00:13:32 - Let's learn about Colby's project
00:16:42 - How automation saves you money and increases the experience for your users
00:28:58 - Super easy image optimization example with the Cloudinary API
00:38:31 - Let's get started with Cloudinary and Next.js
00:42:15 - Using Colby's Cloudinary optimization library
00:47:35 - Swapping the image tag for our optimized component
00:56:24 - Removing the background from our image
00:59:36 - Exploring other props in the docs
01:08:54 - Using underlays
01:10:30 - Overlaying text
01:18:12 - Generating a super simple Open Graph image
01:21:56 - Finding Colby Fayock on the internet
Repo: https://github.com/learnwithjason/clo...
Demo: https://cloudinary-nextjs.netlify.app/
Links
https://www.learnwithjason.dev/
/ colbyfayock
https://cloudinary.com/
https://nextjs.org/
https://next-cloudinary.spacejelly.dev/
/ @colbyfayock
https://spacejelly.dev/discord
https://www.learnwithjason.dev/schedule
Watch future episodes live at / jlengstorf
This episode was sponsored by:
Netlify (https://lwj.dev/netlify)
Nx (https://lwj.dev/nx)
Backlight (https://lwj.dev/backlight)
Live transcription by White Coat Captioning (https://whitecoatcaptioning.com/)
Credits:
Local Elevator by Kevin MacLeod is licensed under a Creative Commons Attribution license (https://creativecommons.org/licenses/...)
Source: http://incompetech.com/music/royalty-...
Artist: http://incompetech.com/
Busybody by Audionautix is licensed under a Creative Commons Attribution license (https://creativecommons.org/licenses/...)
Artist: http://audionautix.com/
Additional sound effects obtained from https://www.zapsplat.com