AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |
Back to Blog
Cloudinary export list of files12/2/2023 ![]() Note: feel free to change my-nextjs-app to whatever name you’d like for the project. In your terminal, run: yarn create next-app my- next-cloudinary To do this, we’ll use Create Next App which will scaffold a brand new project for us. Note: you’ll need a free Cloudinary account to get started! Step 0: Creating a new Next.js app If you already have a Next.js app you’d like to use, feel free to skip Step 0.įrom there, we’ll learn how to use the Next.js Image component with local files, use a Cloudinary image with the Image component, and how to create a simple blurred image placeholder feature for our image. To show how this works, we’re going to start off with a basic Next.js app that we’ll start from scratch. ![]() Little things like this provide a better experience for people visiting our projects. We can also do things like create blurred image placeholders, where cloudinary can automatically generate a blurred version of our image, where we use the real image on top with Next.js. ![]() ![]() Note: Cloudinary alone does a lot of great optimizations, but you would typically have to set up things like responsive images a bit more manually. With Next.js, we can get responsive image sizes in an easy to use API, where we plug in any image, and we get a more performant app “out-of-the-box”.Īs one example, we can use Cloudinary to generate our dynamic images, then pass it into our Next Image component to make it responsive. This includes dynamic cropping, color effects, blur effects (like we’ll see below), and dynamically creating image patterns. With Cloudinary, we can provide any sort of transformation we want programmatically to our image. While separately, the next/image component and Cloudinary both offer a range of powerful features, bringing them together can unlock some great ways to creatively developer experiences for the people visiting your site. Why do we want to use Cloudinary with Next.js Image? The catch though, is you have to do all of this programmatically or manually, meaning, if we want some of the features like responsive images, we would need to generate each of those images and apply them in our code. ![]() It also makes for a great way to smooth out a project workflow for designers and developers to manage and use images. There are a ton of cool things you can do with Cloudinary, such as automatically generating social media images or at it’s simplest, using Cloudinary as a CDN. What is Cloudinary?Ĭloudinary is a media management solution that not just allows teams to manage, optimize, and transform images, but video as well. Next/image ships right with Next.js itself, making the barrier to entry low for developers, but there are other image management tools like Cloudinary, that when coupled with Next.js, provides some powerful options. Note: One caveat, Next.js wraps the image with div ( ) tags making it invalid to nest in paragraph ( ) tags. It unlocks some easy to use image management features like image optimization and responsive sizing.Īt the core of it, it’s meant to be a somewhat “drop-in” replacement for images, where you can pass in an image source, width, height, and automatically get lots of benefits. Next/image is a first class component supported in Next.js. Thanks for answering a few of my questions to make this work! What is Next.js Image? ![]()
0 Comments
Read More
Leave a Reply. |