1
00:00:00,000 --> 00:00:04,000
So route handlers can be a useful feature.

2
00:00:04,000 --> 00:00:09,000
Another feature that can be useful is middleware,

3
00:00:09,000 --> 00:00:10,000
and that is a feature

4
00:00:10,000 --> 00:00:14,000
that does actually not use the app folder.

5
00:00:14,000 --> 00:00:17,000
Instead, you set up middleware

6
00:00:17,000 --> 00:00:20,000
by going to your route project folder,

7
00:00:20,000 --> 00:00:24,000
and then there next to the package.json file and so on

8
00:00:24,000 --> 00:00:28,000
you add a file named middleware.js.

9
00:00:28,000 --> 00:00:30,000
And again, that is a reserved file name.

10
00:00:32,000 --> 00:00:33,000
The position also is important,

11
00:00:33,000 --> 00:00:36,000
it should be in the root project folder.

12
00:00:36,000 --> 00:00:40,000
In there, you should export a function called middleware,

13
00:00:40,000 --> 00:00:43,000
and that function name is also important,

14
00:00:43,000 --> 00:00:47,000
and that will now get a request object

15
00:00:47,000 --> 00:00:50,000
passed in automatically by NextJS,

16
00:00:50,000 --> 00:00:52,000
just as the route handler did.

17
00:00:52,000 --> 00:00:57,000
And you then have to return a Next response,

18
00:00:57,000 --> 00:01:00,000
which is something that must be imported from next/server.

19
00:01:02,000 --> 00:01:05,000
And this next response thing here has various

20
00:01:05,000 --> 00:01:07,000
methods you can call.

21
00:01:07,000 --> 00:01:09,000
You can also instantiate it

22
00:01:09,000 --> 00:01:11,000
to create a new response from scratch,

23
00:01:11,000 --> 00:01:15,000
but you get some utility methods like next,

24
00:01:15,000 --> 00:01:19,000
which simply forwards the incoming request

25
00:01:19,000 --> 00:01:21,000
to its actual destination.

26
00:01:21,000 --> 00:01:25,000
And that also kind of describes what the purpose

27
00:01:25,000 --> 00:01:28,000
of this middleware function is, as does its name.

28
00:01:29,000 --> 00:01:34,000
It is a function that's not really meant to block

29
00:01:34,000 --> 00:01:39,000
or handle an incoming request, though you could do that,

30
00:01:39,000 --> 00:01:41,000
but instead it's typically meant

31
00:01:41,000 --> 00:01:45,000
to take a look at some incoming request,

32
00:01:45,000 --> 00:01:48,000
maybe change it a bit, maybe block it,

33
00:01:48,000 --> 00:01:50,000
for example, to implement authentication

34
00:01:50,000 --> 00:01:53,000
and maybe redirect to another page

35
00:01:53,000 --> 00:01:57,000
if a user is not authenticated, for example,

36
00:01:57,000 --> 00:02:00,000
which you could do with help of the built-in redirect method

37
00:02:00,000 --> 00:02:01,000
on this next response.

38
00:02:02,000 --> 00:02:07,000
But you often also just might want to let the request

39
00:02:07,000 --> 00:02:10,000
go on to its original destination,

40
00:02:10,000 --> 00:02:13,000
maybe after evaluating or changing it.

41
00:02:15,000 --> 00:02:17,000
So here again, we can lock that request

42
00:02:17,000 --> 00:02:21,000
to see what's inside, because here in this application,

43
00:02:21,000 --> 00:02:23,000
we don't really need that middleware feature,

44
00:02:23,000 --> 00:02:27,000
but it is another feature that is related to routing,

45
00:02:27,000 --> 00:02:30,000
which is why I wanted to introduce you to it here,

46
00:02:30,000 --> 00:02:33,000
because middleware does allow you to set up code

47
00:02:33,000 --> 00:02:37,000
that will run on every request that's sent to

48
00:02:37,000 --> 00:02:42,000
any page or any route anywhere in your entire website

49
00:02:42,000 --> 00:02:45,000
so that you can inspect that request block

50
00:02:45,000 --> 00:02:49,000
or redirect the request or do whatever you want to do.

51
00:02:49,000 --> 00:02:51,000
So here with that setup,

52
00:02:51,000 --> 00:02:55,000
if I save that and I open up that terminal

53
00:02:55,000 --> 00:02:57,000
where my server side code runs

54
00:02:57,000 --> 00:03:01,000
and I clear it and restart that development server

55
00:03:01,000 --> 00:03:05,000
so that we start with a clear output again.

56
00:03:05,000 --> 00:03:08,000
If I load the news page, for example,

57
00:03:08,000 --> 00:03:11,000
you see a request object was locked here,

58
00:03:11,000 --> 00:03:14,000
but in there you actually see that it was not

59
00:03:14,000 --> 00:03:15,000
for the news page,

60
00:03:15,000 --> 00:03:17,000
but instead for the fav icon.

61
00:03:19,000 --> 00:03:20,000
Well, that's just the case

62
00:03:20,000 --> 00:03:22,000
because when I visit this news page,

63
00:03:22,000 --> 00:03:25,000
actually multiple requests are sent

64
00:03:25,000 --> 00:03:27,000
and the fav icon request is one of them.

65
00:03:27,000 --> 00:03:30,000
But there also would be a request for every single image

66
00:03:30,000 --> 00:03:32,000
that's shown on the screen

67
00:03:32,000 --> 00:03:35,000
because that also is loaded from our server

68
00:03:35,000 --> 00:03:38,000
and that also is done through a separate request.

69
00:03:38,000 --> 00:03:41,000
And if you would scroll all the way up in your output,

70
00:03:41,000 --> 00:03:46,000
you would also find the request for the news page somewhere.

71
00:03:46,000 --> 00:03:48,000
Here it is in my case.

72
00:03:48,000 --> 00:03:51,000
And that shows you how that middleware function works.

73
00:03:51,000 --> 00:03:54,000
It really runs this code for every request

74
00:03:54,000 --> 00:03:57,000
so that you can do with it whatever you want to do.

75
00:03:58,000 --> 00:04:03,000
Now, you can also export a config object,

76
00:04:03,000 --> 00:04:05,000
and this must be a variable

77
00:04:05,000 --> 00:04:09,000
or constant called config, which must be an object.

78
00:04:09,000 --> 00:04:12,000
And in there you can set up a matcher property,

79
00:04:12,000 --> 00:04:15,000
which must be called matcher,

80
00:04:15,000 --> 00:04:19,000
and that would allow you to filter the kind of requests

81
00:04:19,000 --> 00:04:21,000
that trigger the middleware.

82
00:04:21,000 --> 00:04:26,000
For example, if I filter for /news here like this,

83
00:04:26,000 --> 00:04:28,000
and I then reload this page

84
00:04:28,000 --> 00:04:31,000
and I take another look at my server log thereafter,

85
00:04:31,000 --> 00:04:36,000
you would see that now there is this request

86
00:04:37,000 --> 00:04:41,000
for the news page, but I don't see the request for this icon

87
00:04:41,000 --> 00:04:43,000
or for all those images.

88
00:04:43,000 --> 00:04:46,000
So you could set up some filters here.

89
00:04:46,000 --> 00:04:48,000
And this does not just allow you to filter

90
00:04:48,000 --> 00:04:49,000
for a single page,

91
00:04:49,000 --> 00:04:51,000
but you can also filter for other pages

92
00:04:51,000 --> 00:04:54,000
by setting up a more complex matcher.

93
00:04:54,000 --> 00:04:57,000
And you can find all the details about this

94
00:04:57,000 --> 00:05:01,000
matcher configuration in the official documentation,

95
00:05:01,000 --> 00:05:04,000
and you find a link to that attached so that you can learn

96
00:05:04,000 --> 00:05:07,000
how you could set up this matcher, for example,

97
00:05:07,000 --> 00:05:08,000
by passing an array

98
00:05:08,000 --> 00:05:11,000
and using placeholders to match multiple routes

99
00:05:11,000 --> 00:05:14,000
and not just a single route.

100
00:05:14,000 --> 00:05:16,000
So that's something you can do.

101
00:05:16,000 --> 00:05:17,000
And in general,

102
00:05:17,000 --> 00:05:21,000
this middleware feature is a feature you can use

103
00:05:21,000 --> 00:05:24,000
to handle different requests differently,

104
00:05:24,000 --> 00:05:26,000
to inspect all kinds of requests

105
00:05:26,000 --> 00:05:30,000
and potentially to also redirect requests

106
00:05:30,000 --> 00:05:33,000
depending on what you need to do in your application.

107
00:05:33,000 --> 00:05:36,000
Here we don't really need that feature,

108
00:05:36,000 --> 00:05:38,000
but it's still important to know about it.