1
00:00:00,000 --> 00:00:03,000
Now with route groups out of the way,

2
00:00:03,000 --> 00:00:07,000
there are just two more important route related features

3
00:00:07,000 --> 00:00:09,000
I want to introduce you to.

4
00:00:09,000 --> 00:00:13,000
And the first feature, which we won't need in this app here,

5
00:00:13,000 --> 00:00:15,000
but which you still should know,

6
00:00:15,000 --> 00:00:18,000
are so-called Route Handlers.

7
00:00:18,000 --> 00:00:20,000
For that, I'll set up another path,

8
00:00:20,000 --> 00:00:23,000
another route path, and I'll do it next to my route groups

9
00:00:23,000 --> 00:00:25,000
because it actually won't belong to any

10
00:00:25,000 --> 00:00:27,000
of these route groups

11
00:00:27,000 --> 00:00:30,000
because it won't render an ordinary page

12
00:00:30,000 --> 00:00:33,000
and therefore it won't need a layout.

13
00:00:33,000 --> 00:00:36,000
And I'll name that path API though the name

14
00:00:36,000 --> 00:00:38,000
as always is up to you.

15
00:00:38,000 --> 00:00:42,000
But in there I'll now not add a page.js file.

16
00:00:42,000 --> 00:00:43,000
That wouldn't work

17
00:00:43,000 --> 00:00:45,000
because we wouldn't have a layout for that

18
00:00:45,000 --> 00:00:48,000
if it's outside of one of these route groups.

19
00:00:48,000 --> 00:00:51,000
Instead, I'll name it route.js,

20
00:00:51,000 --> 00:00:55,000
which is another reserved name NextJS is looking for.

21
00:00:55,000 --> 00:00:58,000
But with a route.js file,

22
00:00:58,000 --> 00:01:00,000
you set up a so-called Route Handler,

23
00:01:00,000 --> 00:01:03,000
which is different from a page.

24
00:01:03,000 --> 00:01:05,000
Now, what is a Route Handler though?

25
00:01:06,000 --> 00:01:08,000
A Route Handler is a file

26
00:01:08,000 --> 00:01:11,000
in which you can export various functions,

27
00:01:11,000 --> 00:01:16,000
which must be named GET or POST or PATCH or PUT

28
00:01:19,000 --> 00:01:21,000
or DELETE and so on.

29
00:01:21,000 --> 00:01:23,000
So as you can tell,

30
00:01:23,000 --> 00:01:26,000
which must have an HtDP method name

31
00:01:27,000 --> 00:01:30,000
because the idea behind Route Handlers is

32
00:01:30,000 --> 00:01:33,000
that you can set up routes that don't return pages

33
00:01:33,000 --> 00:01:35,000
that are rendered on the screen,

34
00:01:35,000 --> 00:01:38,000
but instead in there in such Route Handlers,

35
00:01:38,000 --> 00:01:42,000
you would typically return JSON data, for example,

36
00:01:42,000 --> 00:01:44,000
or you would accept incoming JSON data

37
00:01:44,000 --> 00:01:46,000
and return some JSON response.

38
00:01:46,000 --> 00:01:50,000
So the idea behind these Route Handlers is simply

39
00:01:50,000 --> 00:01:54,000
that you can set up API like routes,

40
00:01:54,000 --> 00:01:59,000
which produce data, store data, do whatever you need to do,

41
00:01:59,000 --> 00:02:00,000
but which essentially are called

42
00:02:00,000 --> 00:02:03,000
behind the scenes from some client.

43
00:02:03,000 --> 00:02:07,000
So from a mobile app or maybe even from one of your pages,

44
00:02:07,000 --> 00:02:10,000
but not to render the overall page content,

45
00:02:10,000 --> 00:02:14,000
but maybe just to store some data behind the scenes.

46
00:02:14,000 --> 00:02:17,000
And you can set up multiple Route Handlers

47
00:02:17,000 --> 00:02:21,000
in the same file here to handle different kinds of requests

48
00:02:21,000 --> 00:02:23,000
for one in the same path.

49
00:02:24,000 --> 00:02:26,000
Now these Route Handlers

50
00:02:26,000 --> 00:02:29,000
will automatically receive a request object,

51
00:02:29,000 --> 00:02:32,000
so that will be passed in by NextJS

52
00:02:34,000 --> 00:02:37,000
and I'll simply log it here

53
00:02:37,000 --> 00:02:39,000
so that we can see what's inside.

54
00:02:39,000 --> 00:02:41,000
Of course, you also find all the details

55
00:02:41,000 --> 00:02:42,000
in the official documentation

56
00:02:44,000 --> 00:02:46,000
and they should then return a response.

57
00:02:46,000 --> 00:02:50,000
And for that you can construct a new response object

58
00:02:50,000 --> 00:02:52,000
using the default response class

59
00:02:52,000 --> 00:02:55,000
that's provided out of the box by the browser

60
00:02:55,000 --> 00:02:57,000
and by node.js.

61
00:02:58,000 --> 00:03:01,000
And here you could either return some JSON response

62
00:03:01,000 --> 00:03:06,000
or also just some plain text, which is what I'll do here.

63
00:03:06,000 --> 00:03:09,000
JSON response could be returned with help

64
00:03:09,000 --> 00:03:12,000
of the JSON utility method

65
00:03:12,000 --> 00:03:15,000
that can be called directly on the response class,

66
00:03:15,000 --> 00:03:16,000
by the way.

67
00:03:16,000 --> 00:03:18,000
But here, I'll just return this text

68
00:03:18,000 --> 00:03:21,000
and I'll comment out this POST Route Handler

69
00:03:21,000 --> 00:03:25,000
since here I don't wanna handle POST requests.

70
00:03:25,000 --> 00:03:28,000
But with such a Route Handler added in this case

71
00:03:28,000 --> 00:03:32,000
for a GET request, we can of course still send a request

72
00:03:32,000 --> 00:03:35,000
to it and we can simply send a GET request

73
00:03:35,000 --> 00:03:37,000
by entering the path in our browser.

74
00:03:37,000 --> 00:03:40,000
So in this case to /api,

75
00:03:40,000 --> 00:03:44,000
because that's the path name I chose here.

76
00:03:44,000 --> 00:03:49,000
And you will see that you see this Hello! text here,

77
00:03:49,000 --> 00:03:53,000
which is indeed the text I am returning as a response.

78
00:03:53,000 --> 00:03:56,000
And if you open that server site terminal,

79
00:03:56,000 --> 00:03:59,000
you will see a lot of output there, which is essentially

80
00:03:59,000 --> 00:04:03,000
that request object which is being output.

81
00:04:03,000 --> 00:04:05,000
And you'll see that from that object,

82
00:04:05,000 --> 00:04:08,000
you could get information like the method used,

83
00:04:08,000 --> 00:04:11,000
which is not too surprising since we filter requests

84
00:04:11,000 --> 00:04:15,000
by picking an appropriate name for our function.

85
00:04:15,000 --> 00:04:18,000
But we could also extract a request body

86
00:04:18,000 --> 00:04:19,000
if there would be any,

87
00:04:19,000 --> 00:04:22,000
so that we could store data in a database, for example,

88
00:04:22,000 --> 00:04:25,000
and extract any other information we might need

89
00:04:25,000 --> 00:04:28,000
from that incoming request.

90
00:04:28,000 --> 00:04:30,000
And therefore, even though we don't need

91
00:04:30,000 --> 00:04:33,000
that Route Handler feature here,

92
00:04:33,000 --> 00:04:36,000
and you might in general not need it too often

93
00:04:36,000 --> 00:04:40,000
when building a NextJS application, it's important

94
00:04:40,000 --> 00:04:42,000
to know about this feature

95
00:04:42,000 --> 00:04:46,000
because it can be really helpful, especially if you,

96
00:04:46,000 --> 00:04:49,000
for example, also want to connect our clients

97
00:04:49,000 --> 00:04:51,000
to your NextJS application.

98
00:04:51,000 --> 00:04:54,000
So if you're building a NextJS application

99
00:04:54,000 --> 00:04:57,000
that should not just render its pages and so on,

100
00:04:57,000 --> 00:05:00,000
but that should maybe also deliver data

101
00:05:00,000 --> 00:05:03,000
to some mobile app which sends requests

102
00:05:03,000 --> 00:05:06,000
to this NextJS application, well,

103
00:05:06,000 --> 00:05:08,000
you could then build such Route Handlers

104
00:05:08,000 --> 00:05:10,000
which handle the communication

105
00:05:10,000 --> 00:05:13,000
with such an external client, for example.