1
00:00:03,000 --> 00:00:05,732
Before we look at Image Optimization,

2
00:00:05,732 --> 00:00:09,075
I want to set up ESLint in our project.

3
00:00:09,075 --> 00:00:12,190
ESLint is a tool that can analyze our

4
00:00:12,190 --> 00:00:14,801
code to find possible problems,

5
00:00:14,885 --> 00:00:18,546
and Next.js provides some predefined rules

6
00:00:18,546 --> 00:00:20,992
that can help us avoid issues in

7
00:00:20,992 --> 00:00:23,285
our pages or other components.

8
00:00:23,361 --> 00:00:26,387
Let's start by installing ESLint.

9
00:00:26,387 --> 00:00:28,212
So I'll open the Terminal,

10
00:00:28,212 --> 00:00:30,890
and we can add it to our "devDependencies"

11
00:00:30,890 --> 00:00:34,934
by running "npm install --save-dev eslint"

12
00:00:35,070 --> 00:00:38,661
and then we also want the "eslint-config-next"

13
00:00:38,661 --> 00:00:39,285
package,

14
00:00:39,363 --> 00:00:42,914
that contains the Next.js specific rules.

15
00:00:42,914 --> 00:00:45,475
The dependencies have been installed.

16
00:00:45,475 --> 00:00:49,890
Now, npm currently reports some "vulnerabilities".

17
00:00:49,890 --> 00:00:51,983
Maybe they will have been resolved

18
00:00:51,983 --> 00:00:54,014
by the time you watch this video,

19
00:00:54,076 --> 00:00:57,503
but since I frequently get questions about this,

20
00:00:57,503 --> 00:00:59,915
let me quickly explain something

21
00:00:59,915 --> 00:01:01,271
about "npm audit".

22
00:01:01,347 --> 00:01:05,157
Just because npm reports some "vulnerabilities"

23
00:01:05,157 --> 00:01:07,006
it doesn't mean they're actually

24
00:01:07,006 --> 00:01:08,740
a problem in your own project.

25
00:01:08,797 --> 00:01:11,639
They're just "potential" vulnerabilities.

26
00:01:11,639 --> 00:01:14,847
Now, I'm not saying you should just blindly

27
00:01:14,847 --> 00:01:17,085
ignore the warnings of course,

28
00:01:17,159 --> 00:01:21,111
what I am saying is that we should run "npm audit"

29
00:01:21,111 --> 00:01:22,717
and look at the details.

30
00:01:22,717 --> 00:01:24,986
In this case the "vulnerability"

31
00:01:24,986 --> 00:01:27,255
is in a package called "semver".

32
00:01:27,326 --> 00:01:30,866
And that library is used as a dependency

33
00:01:30,866 --> 00:01:32,724
by 4 eslint packages.

34
00:01:32,813 --> 00:01:36,438
That's why npm reports "5 vulnerabilities"

35
00:01:36,438 --> 00:01:37,215
in total,

36
00:01:37,302 --> 00:01:39,797
but in reality it's just 1.

37
00:01:39,797 --> 00:01:42,334
Anyway, what's more important is

38
00:01:42,334 --> 00:01:44,475
what the actual problem is.

39
00:01:44,554 --> 00:01:47,960
It says semver is "vulnerable to Regular

40
00:01:47,960 --> 00:01:50,514
Expression Denial of Service",

41
00:01:50,599 --> 00:01:53,802
and there's a link where to find more details.

42
00:01:53,802 --> 00:01:56,092
Now, "Regular Expression Denial

43
00:01:56,092 --> 00:01:57,717
of Service" means that

44
00:01:57,791 --> 00:02:00,327
there is some code in the "semver" library

45
00:02:00,327 --> 00:02:02,199
that uses a regular expression,

46
00:02:02,259 --> 00:02:04,957
probably to parse version numbers,

47
00:02:04,957 --> 00:02:09,134
since "semver" is short for "semantic versioning".

48
00:02:09,134 --> 00:02:12,000
And if the string it's trying to parse is

49
00:02:12,000 --> 00:02:14,585
deliberately written in a certain way

50
00:02:14,655 --> 00:02:17,524
that can cause the regular expression

51
00:02:17,524 --> 00:02:19,384
code to run very slowly.

52
00:02:19,462 --> 00:02:22,038
So if you run that code in a server

53
00:02:22,038 --> 00:02:24,319
that provides a user interface,

54
00:02:24,392 --> 00:02:26,741
or an API, that allows users

55
00:02:26,741 --> 00:02:28,837
to send the input string,

56
00:02:28,921 --> 00:02:31,210
somebody could abuse it to make

57
00:02:31,210 --> 00:02:32,835
your server very slow,

58
00:02:32,909 --> 00:02:36,144
causing a so-called "Denial of Service".

59
00:02:36,144 --> 00:02:39,151
Now, the point is: that's not how we're

60
00:02:39,151 --> 00:02:41,773
using that library in our project.

61
00:02:41,850 --> 00:02:43,619
We're not going to run it in

62
00:02:43,619 --> 00:02:45,198
our server in production;

63
00:02:45,261 --> 00:02:47,709
it's only used by "eslint",

64
00:02:47,709 --> 00:02:50,584
that's a tool we only run in development,

65
00:02:50,584 --> 00:02:52,126
to check our own code.

66
00:02:52,196 --> 00:02:54,237
So, given the way we use that

67
00:02:54,237 --> 00:02:55,996
dependency in our project

68
00:02:56,067 --> 00:02:58,350
there is no reason to worry about

69
00:02:58,350 --> 00:03:00,356
this potential vulnerability.

70
00:03:00,425 --> 00:03:03,711
Anyway, let's go back to setting up ESLint.

71
00:03:03,711 --> 00:03:06,912
We want to create a configuration

72
00:03:06,912 --> 00:03:09,725
file called ".eslintrc.json".

73
00:03:09,822 --> 00:03:11,854
This contains a JSON object

74
00:03:11,854 --> 00:03:13,734
with the ESLint settings.

75
00:03:13,810 --> 00:03:17,186
For Next.js we want to set it to extend

76
00:03:17,186 --> 00:03:21,020
the "next/core-web-vitals" configuration.

77
00:03:21,020 --> 00:03:23,932
This will enable all the Next.js

78
00:03:23,932 --> 00:03:25,570
and related rules.

79
00:03:25,661 --> 00:03:29,184
At this point we can open our "package.json" file

80
00:03:29,184 --> 00:03:32,116
and add a script to run the "lint" checks

81
00:03:32,116 --> 00:03:34,658
by executing "next lint".

82
00:03:34,954 --> 00:03:38,497
If you initialize a project with "create-next-app"

83
00:03:38,497 --> 00:03:41,647
it will set up these things automatically for you.

84
00:03:41,647 --> 00:03:44,752
But this way we can run the checks in the terminal

85
00:03:44,752 --> 00:03:47,141
by typing "npm run lint",

86
00:03:47,141 --> 00:03:49,402
and this will analyze our code

87
00:03:49,402 --> 00:03:51,211
and report any problems.

88
00:03:51,286 --> 00:03:54,102
You can see that there are 3 warnings,

89
00:03:54,102 --> 00:03:55,658
in 3 different pages.

90
00:03:55,732 --> 00:03:58,218
The message is the same in every case:

91
00:03:58,218 --> 00:04:01,501
it says "Using img could result in

92
00:04:01,501 --> 00:04:04,688
slower LCP and higher bandwidth."

93
00:04:04,785 --> 00:04:07,911
"Consider using Image from next/image

94
00:04:07,911 --> 00:04:10,785
to automatically optimize images."

95
00:04:10,869 --> 00:04:13,725
So, this rule is encouraging us to

96
00:04:13,725 --> 00:04:16,329
use the Next.js Image component

97
00:04:16,414 --> 00:04:20,031
rather than the standard HTML "img" tag,

98
00:04:20,031 --> 00:04:22,667
because that way our images will be

99
00:04:22,667 --> 00:04:25,002
smaller and should load faster.

100
00:04:25,077 --> 00:04:26,796
Let's go and look at the code

101
00:04:26,796 --> 00:04:28,337
mentioned in the warnings.

102
00:04:28,544 --> 00:04:30,723
One of the files it reported was

103
00:04:30,723 --> 00:04:32,765
the "ReviewsPage' for example.

104
00:04:32,833 --> 00:04:36,836
Here we have a standard HTML "img" element.

105
00:04:36,836 --> 00:04:39,682
We'll see how to use the Next.js Image

106
00:04:39,682 --> 00:04:42,379
component instead in the next video.

107
00:04:42,454 --> 00:04:45,340
But, before that, I suggest installing

108
00:04:45,340 --> 00:04:47,543
the ESLint extension as well.

109
00:04:47,619 --> 00:04:49,802
If we search the Visual Studio

110
00:04:49,802 --> 00:04:51,912
Code extensions for "eslint",

111
00:04:51,984 --> 00:04:54,600
there is an official one by Microsoft

112
00:04:54,600 --> 00:04:56,930
and that's what we want to install.

113
00:04:56,930 --> 00:05:00,229
This will check our code directly in the editor.

114
00:05:00,229 --> 00:05:03,016
So, if we go and look at the same page again,

115
00:05:03,389 --> 00:05:04,733
we should now see that

116
00:05:04,789 --> 00:05:07,521
Visual Studio Code displays a warning

117
00:05:07,521 --> 00:05:09,662
underneath the "img" element.

118
00:05:09,735 --> 00:05:13,078
And if we move the mouse over the suspicious code

119
00:05:13,078 --> 00:05:15,253
it will show the same ESLint

120
00:05:15,253 --> 00:05:17,040
message we saw earlier.

121
00:05:17,117 --> 00:05:19,174
But using the Visual Studio Code

122
00:05:19,174 --> 00:05:20,717
extension is much easier

123
00:05:20,782 --> 00:05:22,562
than having to run a separate

124
00:05:22,562 --> 00:05:24,035
command in the terminal.

125
00:05:24,096 --> 00:05:25,891
We'll see how to get rid of this

126
00:05:25,891 --> 00:05:27,349
warning in the next video.