1
00:00:03,000 --> 00:00:05,528
Next.js provides various Image

2
00:00:05,528 --> 00:00:07,382
Optimization features.

3
00:00:07,466 --> 00:00:12,003
It can convert files to modern formats, like WebP,

4
00:00:12,003 --> 00:00:16,356
automatically resize images, enable lazy loading,

5
00:00:16,356 --> 00:00:17,244
and so on.

6
00:00:17,333 --> 00:00:19,641
Let's see how to use those features

7
00:00:19,641 --> 00:00:20,894
in our application.

8
00:00:20,960 --> 00:00:23,354
Note that, in the terminal, I now

9
00:00:23,354 --> 00:00:25,386
have the dev server running,

10
00:00:25,458 --> 00:00:27,283
not the production one.

11
00:00:27,283 --> 00:00:29,381
And, by the way, I always have the

12
00:00:29,381 --> 00:00:31,231
Strapi server running as well,

13
00:00:31,293 --> 00:00:32,838
in a separate terminal.

14
00:00:32,893 --> 00:00:36,172
Now, in the previous video we set up ESLint,

15
00:00:36,172 --> 00:00:38,261
and we've seen that it shows a

16
00:00:38,261 --> 00:00:40,211
few warnings about our code.

17
00:00:40,280 --> 00:00:42,589
One of them is in the ReviewPage,

18
00:00:42,860 --> 00:00:46,557
where we use a standard HTML "img" element,

19
00:00:46,557 --> 00:00:49,112
but there's a rule suggesting we use

20
00:00:49,112 --> 00:00:51,597
the "next/image" component instead.

21
00:00:51,668 --> 00:00:53,721
Let me go and open a review page,

22
00:00:54,208 --> 00:00:57,182
and show you how this image works at the moment,

23
00:00:57,182 --> 00:01:00,868
if we inspect it using the Chrome Developer Tools.

24
00:01:00,868 --> 00:01:03,458
We can see that its original

25
00:01:03,458 --> 00:01:05,955
size is 1280 by 720 pixels,

26
00:01:06,048 --> 00:01:08,887
even though we set the element

27
00:01:08,887 --> 00:01:10,779
width to 640 pixels.

28
00:01:10,874 --> 00:01:13,165
Also, if we look at the Network tab,

29
00:01:13,165 --> 00:01:15,655
here we can filter images only.

30
00:01:15,655 --> 00:01:18,055
We can see that it's of type "jpeg",

31
00:01:18,055 --> 00:01:21,954
and its size is 147 kilobytes.

32
00:01:21,954 --> 00:01:24,798
Let's remember these details for later.

33
00:01:24,798 --> 00:01:28,419
Now, let's do what the ESLint rule suggested,

34
00:01:28,419 --> 00:01:31,035
and use the "Image" component instead,

35
00:01:31,035 --> 00:01:34,411
that we can import from the "next/image" module.

36
00:01:34,411 --> 00:01:37,076
We can use this component as a replacement

37
00:01:37,076 --> 00:01:40,537
for the standard HTML "img" element.

38
00:01:40,537 --> 00:01:42,873
The Next Image component accepts

39
00:01:42,873 --> 00:01:44,480
mostly the same props.

40
00:01:44,553 --> 00:01:47,389
Let's see what happens if we save this change.

41
00:01:47,389 --> 00:01:48,689
We get an error,

42
00:01:48,689 --> 00:01:50,861
saying that "Image Optimization

43
00:01:50,861 --> 00:01:52,613
using the default loader"

44
00:01:52,683 --> 00:01:55,942
"is not compatible with output: export."

45
00:01:55,942 --> 00:01:57,749
This is happening because

46
00:01:57,797 --> 00:02:01,754
we configured Next.js to do a Static Export.

47
00:02:01,754 --> 00:02:04,469
But Image Optimization only works

48
00:02:04,469 --> 00:02:07,983
if we run our application in a Node.js server.

49
00:02:07,983 --> 00:02:10,506
So, we can no longer build our

50
00:02:10,506 --> 00:02:13,029
app as a fully static website.

51
00:02:13,113 --> 00:02:16,266
Now, the dev server should restart automatically;

52
00:02:16,266 --> 00:02:19,036
let's try reloading the page in the browser,

53
00:02:19,036 --> 00:02:20,295
and see if it works.

54
00:02:20,358 --> 00:02:21,540
It doesn't.

55
00:02:21,540 --> 00:02:24,819
But at least it's a different error this time.

56
00:02:24,819 --> 00:02:28,956
It says "hostname localhost is not configured

57
00:02:28,956 --> 00:02:32,359
under images in your next.config.js".

58
00:02:32,451 --> 00:02:34,465
What this means is that we need

59
00:02:34,465 --> 00:02:36,090
to add some configuration

60
00:02:36,155 --> 00:02:38,885
specifying which hostnames we are

61
00:02:38,885 --> 00:02:41,367
allowed to load "images" from.

62
00:02:41,450 --> 00:02:43,398
We can do that by setting

63
00:02:43,398 --> 00:02:45,345
a "remotePatterns" array,

64
00:02:45,423 --> 00:02:48,373
containing an object for each image server.

65
00:02:48,373 --> 00:02:51,859
Here we need to specify at least the "hostname".

66
00:02:51,859 --> 00:02:53,776
In our case, we want to load

67
00:02:53,776 --> 00:02:55,351
the images from Strapi,

68
00:02:55,419 --> 00:02:57,522
that's running on "localhost".

69
00:02:57,522 --> 00:03:00,879
This step is required for security reasons,

70
00:03:00,879 --> 00:03:03,018
because otherwise bad people could

71
00:03:03,018 --> 00:03:05,094
take advantage of our application

72
00:03:05,157 --> 00:03:06,833
to send requests to other

73
00:03:06,833 --> 00:03:08,508
websites on the internet.

74
00:03:08,575 --> 00:03:11,140
So we want to restrict which servers

75
00:03:11,140 --> 00:03:12,779
we are allowed to call.

76
00:03:12,850 --> 00:03:14,719
In fact, it's better to be

77
00:03:14,719 --> 00:03:16,445
as specific as possible,

78
00:03:16,516 --> 00:03:18,692
and also set the other properties.

79
00:03:18,692 --> 00:03:20,696
Starting from the "protocol",

80
00:03:20,727 --> 00:03:24,043
in our case we're using "http" locally,

81
00:03:24,043 --> 00:03:28,108
but in production you would normally use "https".

82
00:03:28,108 --> 00:03:30,082
Then we can set a "port",

83
00:03:30,128 --> 00:03:32,580
and we want "1337",

84
00:03:32,580 --> 00:03:35,846
that is the port used by the Strapi server.

85
00:03:35,846 --> 00:03:38,977
Finally, we can optionally set a "pathname",

86
00:03:38,977 --> 00:03:42,525
and in Strapi all images are under "uploads",

87
00:03:42,525 --> 00:03:46,395
so we can write "uploads" followed by two asterisks

88
00:03:46,395 --> 00:03:49,127
to match any files inside that path.

89
00:03:49,203 --> 00:03:51,240
This will prevent access to

90
00:03:51,240 --> 00:03:53,276
the Strapi API for example,

91
00:03:53,351 --> 00:03:56,555
that's under the "/api" path instead.

92
00:03:56,555 --> 00:03:57,989
With this configuration,

93
00:03:57,989 --> 00:04:01,415
if we reload the page, it should hopefully work.

94
00:04:01,887 --> 00:04:05,162
We can finally see the "Hades" review again.

95
00:04:05,162 --> 00:04:08,651
So we're now using the Next Image component.

96
00:04:08,651 --> 00:04:10,997
In the next video we'll see exactly

97
00:04:10,997 --> 00:04:12,807
what difference this makes.