And you'll be greeted with an error
because previously, when I used the built-in img element,
instead of the next image element,
I set the source by accessing the imported thing.
So the thing that's actually stored in this logo variable
in this file here,
and by then accessing the source property
on that imported thing.
So that logo thing I'm importing here seems to be an object
that has a src property,
and I'm using the value stored in that src property
as a value for the src prop,
at least that is what worked when I used the built-in image.
Now, with the next image being used,
that needs to change though.
You now need to set the entire logo object
that describes this image file to which we're linking
as a value for src.
So you no longer access the src property,
but you set the entire logo image object here
as a value for the src prop.
And if you do that
and save everything, you'll notice
that everything works again and the error is gone.
Now, why do we need to make this change though?
Well, we need to make this change
because this logo thing here is actually not a path
to the image or anything like that.
Instead, we can console.log logo here
to look into it and see what's stored in there
and what exactly gets generated
by Next.js when we add this import.
And what we'll see is that we'll have an object
that looks something like this,
which includes some path to the image.
It's not the actual path to this logo PNG file,
but instead a path that will work after deployment
or also already during development.
But in the end, it's a path to the image
that has already been processed
by the Next.js build process or development server,
and that has been copied into a different location,
as you can tell, but it's not just that.
Instead, this object
that's generated when we import the image here
actually also contains height and width information
about the image,
and that's important for this image component,
as you can also learn in this image component documentation
in the official Next.js docs,
because this height
and width information is needed by Next.js to determine
how exactly that image should be displayed
and how it should be loaded.
Because if we now inspect that image on the rendered page,
you will see that this Next.js image component
does in the end still render the standard image element,
but it renders this image element with a lot
of settings on it, as you can tell.
For example, it sets loading to lazy,
which makes sure that the image is only loaded
and displayed if it's actually visible on the screen.
That's a mechanism built into the browser,
but it, for example, also sets the width and height,
and that's the width and height as it was determined
from that file we were importing.
And this width
and height information is required by Next.js
to avoid layout shift where the layout
and the elements on the screen jump around
after an image is loaded.
By setting this width
and height here, NextJS makes sure
that the appropriate space for that image is reserved
so that it doesn't suddenly move elements around
as it's being displayed.
In addition, this width
and height information also helps
with serving different image files
with different sizes for different screen densities.
That's something Next.js does out of the box here,
and that's what this srcset attribute here is all about.
This was also added automatically by Next.js,
and this srcset attribute in the end
tells the browser to load different images
for different screen resolution densities.
And you can see that this srcset attribute points
at different image URLs, which are almost exactly the same,
but which have this different query parameter here
inside of it where some width is set in the end
and images with those widths are in the end generated
dynamically, you could say, by Next.js,
as the image is served on different screens
of different resolutions.
So the Next.js image component renders
such a native image element, and as I mentioned,
this width and height setting here is important
to know for Next.js,
but that is determined automatically
when you're importing a file locally.
However, you can override the width
and height that's assumed by Next.js.