Vollständiges Transkript anzeigen (3.417 Wörter)
You have probably seen these beautiful, cinematic websites on YouTube. They're going viral almost every day, and the title is often something like "How to build $10,000 premium website with AI." And it actually got me a bit curious because I was wondering, "How can we build this in Next.js?" And importantly, "How can we make it so that it actually performs well?" Right? So, the common complaint with websites like this is that it doesn't work well in practice because there may be performance issues, so it's not going to convert well in the real world. However, actually I found out that it's you're able to make a website like this with AI, and actually have it perform well. So, it feels very smooth. And also, I'll show you a performance result in a second, but the performance can remain pretty high. So, it's not necessarily the case that this wouldn't perform well in practice. So, we're going to talk a little bit about how to generate these sites with AI, it's actually very easy, but most of the video, we're going to talk about how we can get the performance of this type of website very high. I have three sites here. I really like all of them. So, I generated three sites here with AI, using the latest AI models. Actually, I've been sitting on these for about a week or so. Part of the prompts that I did for them was with GPT-4o, and then I used a little bit of Astro here as well. But honestly, it was just a few prompts. The agents are very good at building a beautiful website as long as it has the right assets. So, really, the main asset that you have to generate here is this, well, video. Right? So, I'll show you in a second how this works. Now, I've been really having a lot of fun building these websites out. But of course, being able to build them out is not enough. We also want to make it practical so that, in the real world, it's not some super laggy website. It needs to perform well. And that means sometimes, if it's a person on a low-end device, we just simply switch from this animated scroll thing into just a static hero image, which still looks great. So, I just switched here, now it's just a static hero image, which still looks great for a hotel website or something. Right? So, we can easily switch here between this animated scroll and just a static image here in case the user is on a not-so-powerful device. Right? So, here I can also switch to just a static hero image. No problem. Here as well, it still looks great. I actually want to do a few videos on these, because it's really cool, and I think this is where a lot of experiences on the web are going. Users are going to expect visually beautiful experiences, not just with websites, also for apps, and for games as well, because AI can generate these beautiful assets, and it's up to us as developers to see how we can make it all practically work well. So, these are all Next.js sites. And I just generated a quick report here for this Cliff House. And you can see that it has still 100% performance. Right? So, we can still get great performance here, even though it's a pretty heavy asset, you would assume. Right? So, traditionally, it's very hard to make it practical, but there are tools available now that really allow us to optimize that whole experience. All right. So, how do we actually build this? So, you need to generate some kind of video somewhere. There are a bunch of tools out there to generate AI videos. I'm not displaying the actual MP4 or something here. What I did was I uploaded the video to Cloudinary. And Cloudinary then allows me to retrieve individual frames from the video. So, if I scroll down a little bit, I'm just loading a different frame of the video. Right? And I can see that in the Network tab. So, if I scroll down, you can see there are just a bunch of fetch requests requesting a new frame. So, I'm getting an optimized WebP image here from Cloudinary. Right? So, I'm making a request to this URL, and it's basically just asking for a frame of a particular video. Right? So, if I check the previous request, you can see it's a slightly different frame. Right? But the images I'm getting are still optimized. It's WebP, it's coming from a CDN. So, yes, Cloudinary is the sponsor, but they really fit in great when you have to do this kind of media delivery. Yeah, this is basically the trick for getting this scroll-based animation. Now, I've been really having a lot of fun building these websites out. But of course, being able to build them out is not enough. We also want to make it practical so that in the real world, it's not some super-laggy website. It needs to perform well. And that means sometimes, if it's a person on a low-end device, we just simply switch from this animated scroll thing into just a static hero image, which still looks great. So, I just switched here. Now it's just a static hero image, which still looks great for a hotel website or something. Right? So, we can easily switch here between this animated scroll and just a static image here in case the user is on a not-so-powerful device. Right? So, here I can also switch to just a static hero image. No problem. Here as well, it still looks great. I actually want to do a few videos on these because they're really cool and I think this is where a lot of experiences on the web are going. Users are going to expect visually beautiful experiences, not just with websites, also for apps, and for games as well, because AI can generate these beautiful assets, and it's up to us as developers to see how we can make it all practically work well. So these are all Next.js sites and I just generated a quick report here for this Cliff House. And you can see that it has still 100% performance, right? So we can still get great performance here even though it's a pretty heavy asset, you would assume. Right? So, traditionally, it's very hard to make it practical. But there are tools available now that really allow us to optimize that whole experience. All right. So, how do we actually build this? So you need to generate some kind of video somewhere, there's a bunch of tools out there to generate AI videos. I'm not displaying the actual MP4 or something here. What I did was, I uploaded the video to Cloudinary, and Cloudinary then allows me to retrieve individual frames from the video. So, if I scroll down a little bit, I'm just loading a different frame of the video. Right? And I can see that in the Network tab. So, if I scroll down, you can see there are just a bunch of fetch requests, requesting a new frame. So, I'm getting an optimized WebP image here from Cloudinary. Right? So I'm making a request to this URL, and it's basically just asking for a frame of a particular video. Right? So, if I check the previous request, you can see it's a slightly different frame. Right? But the images I'm getting are still optimized. It's WebP. It's coming from a CDN. So, yes, Cloudinary is the sponsor, but they really fit in great when you have to do this kind of media delivery. Yeah, this is basically the trick for getting this scroll-based animation. And to get a good asset in the first place, it can help a lot if you already have some kind of reference. So, I think what's going to be really exciting is this Image-to-Video type of functionality. This is in beta as of recording with Cloudinary, but basically it allows you to specify an image and it can generate a video from that. This should help a lot with getting assets that are on-brand, so they're really specific to the brand that you're creating an asset for. It allows you to, well, get more exactly what you want, basically. This is a feature to look out for. But basically once you have the video, you upload it to Cloudinary and they basically allow you to get different variations of that original source asset that you upload to them. So I can request a particular size, so 1600 pixels wide, for example, or a particular format like WebP. So, that's all baked into the URL here, and then it is served on a CDN. Yeah, it's all optimized, basically out of the box, as long as you upload it to Cloudinary. When you work with an AI, it does sometimes make mistakes with images. So for example, it may cut off or crop part of the image that should be visible, and it's very hard for the AI to understand what we as humans would consider what should be part of it. So sometimes it looks a bit awkward, it's just not properly positioned for example. Also sometimes, it's just a bit of a jarring transition. So if you have multiple images, it needs to shift around other content, or there is text around it that needs to move as well. Sometimes, all of that is a bit jarring, so you still need to understand how these images load, and some of the options that we have to optimize it because I find that the AI sometimes doesn't properly use the Next.js image component. So let's talk a little bit about how we can even get a static hero image like this optimized, and all delivered to our users. And then in one of the next videos, we're going to talk more about the video-related aspect, and getting a scroll animation. But just getting these static images right is actually already a little bit tricky, like I said for some of these AI coding agents. So I think it's important to understand how media and images are loaded. So in Next.js we have the Image component, right? So of course, in plain, native HTML, we have the image tag. And actually, it allows you to specify things like width and height as well. But with Next.js out of the box, we get a powerful component which actually takes it a step further. Right? So just to quickly give you an intuition here, so I have this image here on the page. I can technically just use a plain native image tag, and in fact, sometimes an AI coding agent will default to just using this native tag. Now this image by itself, right, it's just a PNG file, right? I can have a PNG file on my computer and it's going to have an intrinsic size. Basically it's, it could be a thousand pixels wide and 800 pixels tall. But I don't want to display the image on my website here at that specific size. Right? So maybe I only want it to be 440 pixels wide. So you may think, "Oh, I'm just going to do it with CSS," right? Or the AI coding agent may do that. It may just put the width at 440, 440 pixels. But this is a CSS transformation, so what you're downloading over the network is still that big image that is a thousand pixels wide. Right, and then here when it's downloaded, the browser is going to resize it. Right? So if I open up this image in a new tab, you can see I'm getting this huge image. This is what we're downloading over the internet, right? Very inefficient because we're only going to display it at such a small size. So we could technically optimize it by just making sure the right size is downloaded over the internet. Right, this is a huge image, and actually it's 2.4 megabytes, completely unoptimized PNG image. Huge. There's no need for us to do it like this. So, instead, we could use the Next.js image component. It's just a component you can import from Next Image, comes with many optimizations out of the box. We can just point to the same asset, so just the same PNG file on our server, and in here we actually specify three different sizes. So, we specify the original image's height and width, that's the, that's the original PNG file. And this helps the browser get the right proportions so it reserves the right space, so it reduces the content shifting. Then we specify here, just how we want to display it here on the page. So, I want a width of 440 pixels, but here for loading the actual image, this one is very important because this is going to give the browser a hint of how big, how large of an image we actually want to download over the internet. Well, in this case, ideally exactly 440 pixels wide, right? Cuz that's what we're going to display it as. So, we don't need anything bigger. We don't want it smaller either, because then it's going to be pixelated, right? Cuz then it's going to scale up a bit to be 440 pixels. So, it's ideally exactly 440 pixels. So, this image on the left here is using the Next Image component. And what does that give us here in the HTML? So, it actually will give us still a plain image tag, but it gives us this massive source set. And we gave it a hint of 440 pixels width. So, in this case, the closest to that would be this 480. So, this is the right URL, basically that the browser should use to, uh, download the image. Right, so the browser is going to pick one of these candidates here to download the image. So, the browser will pick this URL to make the actual request to the server side for downloading the image. And in that URL, let me actually copy it. So, basically the URL that the browser will pick is this one. Right, so the full URL may be something like this. Right? So, so it's basically that original source file that we have on our Next.js server side. But then we're requesting a smaller version, so we say, "We want this one at a width of 480," right? And other things like quality, one. But basically, we want a smaller image, right? We want to download a smaller image. It's not exactly 440, it's 480, but it's going to be a little bit bigger, that's okay. The browser will just size it down a bit. So, the browser has the ability to request different sizes of the original source image that we have on our Next.js server side. So, when the browser makes a request for a particular size, the Next.js server that we have is going to generate that particular variation of the original source file on the fly, and then the next time somebody makes that request it's already created, so it can just serve the same variation. So, this image now is smaller. So, if we open it up, you can see that this one is, well, still pretty big but it's smaller than what we had before. And also, our Next.js server side can already make it a WebP version, for example, so it's not a huge PNG file. Right? So your Next.js server side already has pretty decent image processing capability out of the box. So, if I open this up one, you can see it's a WebP image, and it actually it is still pretty big, but, uh, just quickly showing you here in the Network tab, right, if I load the page here, it's about 122 kilobytes now. So way less than that one megabyte or something that we had before. The dimensions are still pretty, uh, big actually. Right, so it's a bit tricky, but it's about CSS pixels, and my screen on a MacBook has more pixels available, so it's actually able to load a larger image, so I have more uh detail in the image. So there is a bit of a complex logic here for which URL the browser may actually pick. So it's not only literally about the size I specify here, it's also about how many pixels my screen can display and your internet speed and things like that. But ultimately, it picks one, and our Next.js server side can generate the right variation, uh, on demand, and then, uh, store it, and serve it over and over again. So that is how you would use a, a custom loader here with, uh, the Next.js image component. Basically just a way of constructing the right, uh, URL. Right? So you can have your AI coding agent use that, or Cloudinary has an even more convenient option out of the box as well, which is they have their own Cloudinary Image component as well. So in that case, we do not have that awkward syntax with the custom loader. Instead, you get a clean component from them, and they actually wrap the Next.js Image component for you. So under the hood this would still use the Next.js Image component, which itself under the hood is just going to produce a native image tag. So ultimately it all comes back to native image tags, uh, but here we get a bunch of options instead of having to construct a strange URL, we can just use, uh, props, like you're used to in React, right, or your AI coding agent, perhaps. So to get started with images, Cloudinary actually also has AI image generation now. You can log in with the link in the description, and, uh, you will see an option here for image generation. So I may actually want to start off, uh, like this. So I may want to generate a static image first, and then perhaps generate a video from it if I like the image. I can also do it programmatically or even use my AI agent to do it programmatically. I may also want to add references. This helps a lot with, uh, getting the right results. So if you already know the type of colors or brand that you want to replicate, that's something that you may want to add here. We can pick the model, they offer NanoBanana 2, and a bunch of other ones here as well. So I can then hit "Generate with AI" and do it right here with Cloudinary as well. So in this case I'm just asking for a, you know, luxury coastal hotel, similar to what we have here, just to show you how I would regenerate that. Yeah, so now I have that image. I could then generate a video from this and use that as the original source MP4 as an asset like this, right, but again, remember what I'm seeing here are just individual frames. So, once you have a video, I can use URL-based transformations again to get a particular still at the right scroll position. That would look something like this, but this is all URL-based parameters. So, that is how I got these websites to perform so well, and to look so beautiful. I think we're going to see a lot of websites and apps offer a really beautiful experience with still great performance. Right? So, all of these websites here perform very well, and in case somebody is not, you know, on a great, uh, device or something or some other issue, we can easily switch it off and still deliver a pretty powerful hero image in a very performant manner as well. Right? So it doesn't have to be a scroll-based animation. So, that should all perform well as long as you use the image best practices that we discussed in this video. May check out Cloudinary with the link in the description, and subscribe for the next video, in which we talk more about adding those videos. Thank you for watching, and I hope to see you in the next one. Bye.
Video
Video
Video
Video
