0:00
If you work in HTML, CSS, JavaScript or any other framework
0:05
then there are very high chances that when you use Images, you face a problem that the size of the image is 20 MB
0:12
and the image is loading on your site when a user opens your site
0:16
which makes your site very slow and spoils your Google search rankings
0:21
In Next.js, this thing has been improved very well. This is because Next.js provides an image component
0:28
Now what does this image component do? This image component automatically optimizes your images
0:33
This image is by default lazy loaded, that is, the image that is not in the viewport yet
0:38
which is not present on your computer screen and is below, maybe you will scroll it later
0:43
that kind of image will not penalize the page speed. That is, if the total page is going to load in 2 seconds
0:52
it may load in 300 milliseconds, because only those images are loaded that are in the viewport
0:58
that is, what you see on the screen. So this kind of tools make Next.js very strong
1:03
Let's see how to work with this image component. Let's get started with the video. �
1:19
Today we are going to buy this domain. Why are we buying the domain? Because we want to make our hunting coder blog perfect
1:26
So I will write here Hunting Coder Search Domain. I am using GoDaddy, you can go with any provider
1:32
Buy from wherever you get cheap. It is not necessary that you buy from GoDaddy
1:37
but I am using GoDaddy, so I am buying from GoDaddy. There are many other providers
1:41
So huntingcoder.com is fine for me. I will buy huntingcoder.com. I did add to cart and will continue to cart
1:48
After continuing to cart, I am waiting. I don't need anything, brother
1:53
The cheaper it is, the better. I don't need professional email, no thanks. We are moving forward
2:00
And after moving forward, huntingprogrammer, not huntingprogrammer, huntingcoder. I think I had put this huntingprogrammer in the cart earlier
2:09
Huntingcoder.com, no, not for 5 years. If we see it will work, then we will increase it
2:14
If it doesn't work, then why will we increase it? How much is it for 1 year? It is for 1 year
2:19
Tell me quickly, brother. 849, it is for 2 years. 2 years is cheaper here on GoDaddy
2:26
As far as my idea is, 1 to 9, 8. So I will buy for 2 years, okay. There is no promo code, I am ready to pay obviously
2:32
I am ready to pay. I am ready to pay, okay. 1 to 9, 8
2:36
So here I will click on ready to pay. And I will finish this payment and come
2:40
So finally I have completed this order. I have paid the money and come
2:44
And here you can see that our blog is now ours. Continuing the discussion, now I will come here
2:50
in the hunting coder. I will open with code by right-clicking and this folder will open for me
2:56
And here I will tell you about the next image component. Now if you have seen our starter template here
3:03
in which there was an import of next image, then you will know that an image component
3:08
also happens in Next.js. Now I will tell you what this image component does
3:12
If we talk about the image component, I open the next image here
3:16
And I open the documentation of the image component of Next.js in front
3:20
This basically gives you some optimized images. This basically gives you optimized images
3:30
That is, if you are using any image at any time, then behind the scenes, Next.js will optimize it
3:37
by using its own powers. That is, there will be some code run of its logic which will optimize your images
3:42
By default, the images are lazy loaded. Lazy loading means that if your images are not in the viewport
3:49
then they will not be loaded and as soon as they come to the viewport, they will be loaded
3:54
I hope everyone understands this thing. Now here the page speed will not be penalized
4:00
because your images are being lazy loaded. For example, I will give you a very good example
4:04
of lazy loading. I go to a website and open the tailwind course here
4:09
Now the 7th video of Tailwind is in my viewport. Its thumbnail is in my viewport
4:16
But the 11th video of Tailwind is not on my screen yet. As soon as I scroll, it comes on my screen
4:22
So what happens is what your browser does when you guys do lazy loading of images
4:28
So images are loaded when you bring them to the viewport. That is, if I scroll it now and I talk about the 15th video here
4:35
then the first 15 videos were not in my viewport. Now it has come to my viewport and as soon as it comes to my viewport
4:40
it will be loaded and before that it will not be loaded. So this is called lazy loading
4:45
Along with that, it also provides you with the ability to make responsive
4:50
So there are a lot of configuration options for Next.js. But I show you a very simple thing here
4:56
that how to use it. If I scroll up here
