1
00:00:00,000 --> 00:00:02,000
And you'll be greeted with an error

2
00:00:02,000 --> 00:00:06,000
because previously, when I used the built-in img element,

3
00:00:06,000 --> 00:00:09,000
instead of the next image element,

4
00:00:09,000 --> 00:00:14,000
I set the source by accessing the imported thing.

5
00:00:15,000 --> 00:00:19,000
So the thing that's actually stored in this logo variable

6
00:00:19,000 --> 00:00:20,000
in this file here,

7
00:00:20,000 --> 00:00:23,000
and by then accessing the source property

8
00:00:23,000 --> 00:00:26,000
on that imported thing.

9
00:00:26,000 --> 00:00:29,000
So that logo thing I'm importing here seems to be an object

10
00:00:29,000 --> 00:00:32,000
that has a src property,

11
00:00:32,000 --> 00:00:35,000
and I'm using the value stored in that src property

12
00:00:35,000 --> 00:00:38,000
as a value for the src prop,

13
00:00:38,000 --> 00:00:42,000
at least that is what worked when I used the built-in image.

14
00:00:43,000 --> 00:00:45,000
Now, with the next image being used,

15
00:00:45,000 --> 00:00:48,000
that needs to change though.

16
00:00:48,000 --> 00:00:51,000
You now need to set the entire logo object

17
00:00:51,000 --> 00:00:55,000
that describes this image file to which we're linking

18
00:00:55,000 --> 00:00:57,000
as a value for src.

19
00:00:58,000 --> 00:01:00,000
So you no longer access the src property,

20
00:01:00,000 --> 00:01:04,000
but you set the entire logo image object here

21
00:01:04,000 --> 00:01:06,000
as a value for the src prop.

22
00:01:07,000 --> 00:01:08,000
And if you do that

23
00:01:08,000 --> 00:01:11,000
and save everything, you'll notice

24
00:01:11,000 --> 00:01:15,000
that everything works again and the error is gone.

25
00:01:15,000 --> 00:01:19,000
Now, why do we need to make this change though?

26
00:01:19,000 --> 00:01:21,000
Well, we need to make this change

27
00:01:21,000 --> 00:01:26,000
because this logo thing here is actually not a path

28
00:01:26,000 --> 00:01:28,000
to the image or anything like that.

29
00:01:28,000 --> 00:01:32,000
Instead, we can console.log logo here

30
00:01:32,000 --> 00:01:35,000
to look into it and see what's stored in there

31
00:01:35,000 --> 00:01:37,000
and what exactly gets generated

32
00:01:37,000 --> 00:01:40,000
by Next.js when we add this import.

33
00:01:41,000 --> 00:01:43,000
And what we'll see is that we'll have an object

34
00:01:43,000 --> 00:01:45,000
that looks something like this,

35
00:01:45,000 --> 00:01:48,000
which includes some path to the image.

36
00:01:48,000 --> 00:01:52,000
It's not the actual path to this logo PNG file,

37
00:01:52,000 --> 00:01:56,000
but instead a path that will work after deployment

38
00:01:56,000 --> 00:01:58,000
or also already during development.

39
00:01:58,000 --> 00:02:00,000
But in the end, it's a path to the image

40
00:02:00,000 --> 00:02:02,000
that has already been processed

41
00:02:02,000 --> 00:02:06,000
by the Next.js build process or development server,

42
00:02:06,000 --> 00:02:09,000
and that has been copied into a different location,

43
00:02:09,000 --> 00:02:11,000
as you can tell, but it's not just that.

44
00:02:11,000 --> 00:02:13,000
Instead, this object

45
00:02:13,000 --> 00:02:16,000
that's generated when we import the image here

46
00:02:16,000 --> 00:02:19,000
actually also contains height and width information

47
00:02:19,000 --> 00:02:21,000
about the image,

48
00:02:21,000 --> 00:02:25,000
and that's important for this image component,

49
00:02:25,000 --> 00:02:29,000
as you can also learn in this image component documentation

50
00:02:29,000 --> 00:02:32,000
in the official Next.js docs,

51
00:02:33,000 --> 00:02:34,000
because this height

52
00:02:34,000 --> 00:02:38,000
and width information is needed by Next.js to determine

53
00:02:38,000 --> 00:02:40,000
how exactly that image should be displayed

54
00:02:40,000 --> 00:02:42,000
and how it should be loaded.

55
00:02:43,000 --> 00:02:47,000
Because if we now inspect that image on the rendered page,

56
00:02:47,000 --> 00:02:50,000
you will see that this Next.js image component

57
00:02:50,000 --> 00:02:53,000
does in the end still render the standard image element,

58
00:02:53,000 --> 00:02:56,000
but it renders this image element with a lot

59
00:02:56,000 --> 00:02:58,000
of settings on it, as you can tell.

60
00:02:59,000 --> 00:03:01,000
For example, it sets loading to lazy,

61
00:03:01,000 --> 00:03:04,000
which makes sure that the image is only loaded

62
00:03:04,000 --> 00:03:07,000
and displayed if it's actually visible on the screen.

63
00:03:07,000 --> 00:03:09,000
That's a mechanism built into the browser,

64
00:03:09,000 --> 00:03:12,000
but it, for example, also sets the width and height,

65
00:03:12,000 --> 00:03:15,000
and that's the width and height as it was determined

66
00:03:15,000 --> 00:03:18,000
from that file we were importing.

67
00:03:18,000 --> 00:03:19,000
And this width

68
00:03:19,000 --> 00:03:23,000
and height information is required by Next.js

69
00:03:23,000 --> 00:03:27,000
to avoid layout shift where the layout

70
00:03:27,000 --> 00:03:29,000
and the elements on the screen jump around

71
00:03:29,000 --> 00:03:32,000
after an image is loaded.

72
00:03:32,000 --> 00:03:33,000
By setting this width

73
00:03:33,000 --> 00:03:36,000
and height here, NextJS makes sure

74
00:03:36,000 --> 00:03:39,000
that the appropriate space for that image is reserved

75
00:03:39,000 --> 00:03:42,000
so that it doesn't suddenly move elements around

76
00:03:42,000 --> 00:03:44,000
as it's being displayed.

77
00:03:45,000 --> 00:03:47,000
In addition, this width

78
00:03:47,000 --> 00:03:49,000
and height information also helps

79
00:03:49,000 --> 00:03:52,000
with serving different image files

80
00:03:52,000 --> 00:03:57,000
with different sizes for different screen densities.

81
00:03:57,000 --> 00:04:01,000
That's something Next.js does out of the box here,

82
00:04:01,000 --> 00:04:05,000
and that's what this srcset attribute here is all about.

83
00:04:05,000 --> 00:04:09,000
This was also added automatically by Next.js,

84
00:04:09,000 --> 00:04:12,000
and this srcset attribute in the end

85
00:04:12,000 --> 00:04:16,000
tells the browser to load different images

86
00:04:16,000 --> 00:04:19,000
for different screen resolution densities.

87
00:04:20,000 --> 00:04:24,000
And you can see that this srcset attribute points

88
00:04:24,000 --> 00:04:29,000
at different image URLs, which are almost exactly the same,

89
00:04:29,000 --> 00:04:32,000
but which have this different query parameter here

90
00:04:32,000 --> 00:04:37,000
inside of it where some width is set in the end

91
00:04:38,000 --> 00:04:42,000
and images with those widths are in the end generated

92
00:04:42,000 --> 00:04:46,000
dynamically, you could say, by Next.js,

93
00:04:46,000 --> 00:04:49,000
as the image is served on different screens

94
00:04:49,000 --> 00:04:52,000
of different resolutions.

95
00:04:52,000 --> 00:04:55,000
So the Next.js image component renders

96
00:04:55,000 --> 00:04:58,000
such a native image element, and as I mentioned,

97
00:04:58,000 --> 00:05:00,000
this width and height setting here is important

98
00:05:00,000 --> 00:05:02,000
to know for Next.js,

99
00:05:02,000 --> 00:05:05,000
but that is determined automatically

100
00:05:05,000 --> 00:05:07,000
when you're importing a file locally.

101
00:05:07,000 --> 00:05:10,000
However, you can override the width

102
00:05:10,000 --> 00:05:13,000
and height that's assumed by Next.js.