1
00:00:00,000 --> 00:00:02,000
Now, since we're already talking

2
00:00:02,000 --> 00:00:04,000
about errors, there's another kind of error

3
00:00:04,000 --> 00:00:06,000
that could occur.

4
00:00:06,000 --> 00:00:10,000
What happens if a user enters an invalid URL?

5
00:00:10,000 --> 00:00:12,000
Something like my-meals,

6
00:00:12,000 --> 00:00:15,000
which is a path we're not supporting here.

7
00:00:15,000 --> 00:00:20,000
In that case, we get this default 404 page

8
00:00:20,000 --> 00:00:22,000
with which you might be happy, of course,

9
00:00:22,000 --> 00:00:24,000
no need to change it.

10
00:00:24,000 --> 00:00:27,000
But if you want to, you can change it.

11
00:00:27,000 --> 00:00:32,000
And to do that, you can add a not-found.js file, like this.

12
00:00:33,000 --> 00:00:37,000
And again, you can add that anywhere in your app folder

13
00:00:37,000 --> 00:00:42,000
and it'll automatically cover any sibling and nested pages.

14
00:00:43,000 --> 00:00:45,000
So if I add it here on the root level,

15
00:00:45,000 --> 00:00:48,000
we can simply catch all not-found errors

16
00:00:48,000 --> 00:00:52,000
that might be generated from anywhere in this application.

17
00:00:52,000 --> 00:00:54,000
If you would want to be more granular

18
00:00:54,000 --> 00:00:57,000
and maybe show more granular error messages,

19
00:00:57,000 --> 00:01:00,000
you could nest it into some other folder.

20
00:01:00,000 --> 00:01:03,000
Now, here, I will go with that global level.

21
00:01:03,000 --> 00:01:06,000
And then, again export a function here,

22
00:01:06,000 --> 00:01:08,000
which I'll name NotFound.

23
00:01:09,000 --> 00:01:12,000
And then here, I'll simply return a main element

24
00:01:12,000 --> 00:01:15,000
with a class name of not-found,

25
00:01:15,000 --> 00:01:17,000
which is another CSS class I prepared

26
00:01:17,000 --> 00:01:20,000
in that globals.css file.

27
00:01:20,000 --> 00:01:23,000
And I'll then add a title of Not found.

28
00:01:23,000 --> 00:01:26,000
And I'll, below that, output a text,

29
00:01:26,000 --> 00:01:30,000
where I'll say, "Unfortunately, we could not find

30
00:01:30,000 --> 00:01:33,000
the requested page or resource."

31
00:01:35,000 --> 00:01:36,000
Like this.

32
00:01:37,000 --> 00:01:41,000
And with that edit, you'll see that now, for invalid pages,

33
00:01:41,000 --> 00:01:44,000
we see our custom Not Found page here.

34
00:01:45,000 --> 00:01:47,000
But with that, I'll now go back to my meals

35
00:01:47,000 --> 00:01:50,000
because, as a next step, I want to make sure

36
00:01:50,000 --> 00:01:52,000
that we cannot just see all meals,

37
00:01:52,000 --> 00:01:55,000
but that we can also browse the meal details.