1
00:00:02,000 --> 00:00:04,000
So let's add the API route

2
00:00:04,000 --> 00:00:05,000
to what you want to talk here.

3
00:00:05,000 --> 00:00:08,000
You learned that API routes are added by going

4
00:00:08,000 --> 00:00:12,000
to the pages folder and then in there, the API folder,

5
00:00:12,000 --> 00:00:15,000
and then in there, the contact.js file.

6
00:00:15,000 --> 00:00:17,000
Now, that file name is up to you,

7
00:00:17,000 --> 00:00:20,000
but this leads to a route of /api/contact

8
00:00:20,000 --> 00:00:24,000
to which we can send requests to reach this API route.

9
00:00:25,000 --> 00:00:27,000
Now in there, we should just set up a function,

10
00:00:27,000 --> 00:00:30,000
typically called handler, which is exported,

11
00:00:30,000 --> 00:00:31,000
and hence, of course,

12
00:00:31,000 --> 00:00:33,000
the function name doesn't actually matter.

13
00:00:34,000 --> 00:00:35,000
This function, as you learned,

14
00:00:35,000 --> 00:00:38,000
receives a request and a response object

15
00:00:38,000 --> 00:00:41,000
and it only executes on the server-side.

16
00:00:41,000 --> 00:00:44,000
It's never included in any client-side code,

17
00:00:44,000 --> 00:00:48,000
and here we can then handle the incoming request,

18
00:00:48,000 --> 00:00:51,000
check the request method, extract data from the request,

19
00:00:51,000 --> 00:00:53,000
and do whatever we need to do,

20
00:00:53,000 --> 00:00:55,000
and that's what I'll do here.

21
00:00:55,000 --> 00:00:59,000
I'll first of all, check if request method is equal to POST,

22
00:00:59,000 --> 00:01:02,000
because I want to submit this contact form

23
00:01:02,000 --> 00:01:04,000
with a POST request.

24
00:01:04,000 --> 00:01:07,000
So any other requests will be ignored

25
00:01:07,000 --> 00:01:08,000
and will not do anything.

26
00:01:09,000 --> 00:01:13,000
So if the request method is POST, then we'll continue.

27
00:01:13,000 --> 00:01:16,000
As a first step, I want to extract data

28
00:01:16,000 --> 00:01:18,000
from the body of that request.

29
00:01:18,000 --> 00:01:21,000
Now, thankfully, as we learned, Next.js

30
00:01:21,000 --> 00:01:24,000
will automatically parse that body for us,

31
00:01:24,000 --> 00:01:27,000
so we have this request body property,

32
00:01:27,000 --> 00:01:29,000
which holds the request body,

33
00:01:29,000 --> 00:01:32,000
and we can now just get data out of that,

34
00:01:32,000 --> 00:01:34,000
for example, with object de-structuring,

35
00:01:34,000 --> 00:01:38,000
and we could expect that we have a email,

36
00:01:38,000 --> 00:01:41,000
a name, and a message field in that body.

37
00:01:41,000 --> 00:01:44,000
We have to make sure that we add those fields

38
00:01:44,000 --> 00:01:47,000
to the request body when we send the request

39
00:01:47,000 --> 00:01:49,000
from the front-end later,

40
00:01:49,000 --> 00:01:52,000
but here I'll assume that I have a email,

41
00:01:52,000 --> 00:01:55,000
a name, and a message property in my request body.

42
00:01:57,000 --> 00:01:59,000
Now we can validate that, because you learned

43
00:01:59,000 --> 00:02:03,000
that you should not trust client-side validation

44
00:02:03,000 --> 00:02:07,000
because that can always be disabled or tricked.

45
00:02:07,000 --> 00:02:10,000
So here I then check if we don't have a email,

46
00:02:10,000 --> 00:02:15,000
or email does not include a at sign

47
00:02:15,000 --> 00:02:17,000
by adding a exclamation mark here,

48
00:02:17,000 --> 00:02:19,000
or we don't have a name,

49
00:02:19,000 --> 00:02:24,000
or if we trim the name it's equal to an empty string,

50
00:02:24,000 --> 00:02:27,000
or we don't have a message,

51
00:02:27,000 --> 00:02:32,000
or if we trim message, it's an empty string.

52
00:02:34,000 --> 00:02:36,000
If either of these conditions is met

53
00:02:36,000 --> 00:02:38,000
then we don't continue.

54
00:02:38,000 --> 00:02:41,000
Then I'll return to stop function execution

55
00:02:41,000 --> 00:02:43,000
and I'll send back a response

56
00:02:43,000 --> 00:02:46,000
with that response object, as you learned.

57
00:02:46,000 --> 00:02:49,000
There we can call status to set a status code

58
00:02:49,000 --> 00:02:53,000
and set this to 422, for example,

59
00:02:53,000 --> 00:02:55,000
and then I'll do call JSON on that

60
00:02:55,000 --> 00:02:58,000
to add some data in JSON format,

61
00:02:58,000 --> 00:03:02,000
which is the defacto standard format for exchanging data

62
00:03:02,000 --> 00:03:06,000
with APIs, to add some data to the response,

63
00:03:06,000 --> 00:03:08,000
and here we pass a object

64
00:03:08,000 --> 00:03:10,000
where we could add a message property and say,

65
00:03:10,000 --> 00:03:14,000
invalid input, something like this.

66
00:03:16,000 --> 00:03:18,000
Okay, now, if we make it past this if check,

67
00:03:18,000 --> 00:03:20,000
we have valid data,

68
00:03:20,000 --> 00:03:24,000
and then we want to store it in a database.

69
00:03:24,000 --> 00:03:27,000
Now that will be step number two, for the moment,

70
00:03:27,000 --> 00:03:30,000
I'll just add a new message object here

71
00:03:30,000 --> 00:03:35,000
and just add my email, name, and message here,

72
00:03:36,000 --> 00:03:37,000
and then just console.log it,

73
00:03:37,000 --> 00:03:40,000
but later we will also store it in a database,

74
00:03:40,000 --> 00:03:44,000
just as we did it before in the course already,

75
00:03:44,000 --> 00:03:46,000
but for the moment, that's it,

76
00:03:46,000 --> 00:03:49,000
and of course, I'll send back a response

77
00:03:49,000 --> 00:03:52,000
where I set the status code to 201,

78
00:03:52,000 --> 00:03:55,000
which means that it was a success and we added a resource.

79
00:03:55,000 --> 00:03:57,000
We stored the message,

80
00:03:57,000 --> 00:03:59,000
even though technically we didn't yet,

81
00:03:59,000 --> 00:04:03,000
and then maybe also a message here,

82
00:04:04,000 --> 00:04:07,000
successfully stored message,

83
00:04:07,000 --> 00:04:11,000
and also, maybe send back the message if we want to.

84
00:04:11,000 --> 00:04:12,000
It's of course, up to you

85
00:04:12,000 --> 00:04:14,000
which kind of data you want to send back,

86
00:04:15,000 --> 00:04:18,000
and with that, we're done with that API route.

87
00:04:18,000 --> 00:04:20,000
Now, before we connect the database,

88
00:04:20,000 --> 00:04:23,000
let's make sure we do add the front-end code

89
00:04:23,000 --> 00:04:24,000
for sending requests to it.