1
00:00:00,000 --> 00:00:02,000
Now, it is possible

2
00:00:02,000 --> 00:00:06,000
that a user tries to look for a meal that doesn't exist,

3
00:00:06,000 --> 00:00:08,000
like great bolo.

4
00:00:09,000 --> 00:00:12,000
And in that case, I get this "An error occurred" page.

5
00:00:14,000 --> 00:00:16,000
Now, I'm getting this error-occurred page

6
00:00:16,000 --> 00:00:21,000
because I'm trying to access the instructions on undefined

7
00:00:21,000 --> 00:00:24,000
because I wasn't able to load a meal.

8
00:00:25,000 --> 00:00:28,000
So it's good that we get some fallback page,

9
00:00:28,000 --> 00:00:31,000
but it's not actually an error that occurred,

10
00:00:31,000 --> 00:00:33,000
if we look at it from a technical perspective,

11
00:00:33,000 --> 00:00:37,000
instead, we simply did not find the requested meal.

12
00:00:38,000 --> 00:00:40,000
So a better way of handling this

13
00:00:40,000 --> 00:00:44,000
would be to go here and check if not meal.

14
00:00:44,000 --> 00:00:48,000
So if meal is undefined, if we didn't find a meal.

15
00:00:48,000 --> 00:00:52,000
And then show the closest not-found page

16
00:00:52,000 --> 00:00:53,000
available in this project.

17
00:00:54,000 --> 00:00:57,000
And that can indeed be triggered

18
00:00:57,000 --> 00:01:01,000
by calling a special function that's provided by NextJS,

19
00:01:01,000 --> 00:01:04,000
the notFound function,

20
00:01:04,000 --> 00:01:06,000
which is imported from next/navigation.

21
00:01:08,000 --> 00:01:10,000
Calling this function

22
00:01:10,000 --> 00:01:13,000
will stop this component from executing

23
00:01:13,000 --> 00:01:17,000
and will show the closest not-found or error page.

24
00:01:17,000 --> 00:01:20,000
So if we have an error page that's closer,

25
00:01:20,000 --> 00:01:23,000
as it's the case here, than the closest not-found page,

26
00:01:23,000 --> 00:01:25,000
it will still show that.

27
00:01:26,000 --> 00:01:27,000
But we can work around that

28
00:01:27,000 --> 00:01:30,000
by also adding a not-found tray as fall here

29
00:01:30,000 --> 00:01:32,000
instead of the meals folder.

30
00:01:32,000 --> 00:01:34,000
And then we can also set up some

31
00:01:34,000 --> 00:01:36,000
meal-specific not-found message.

32
00:01:37,000 --> 00:01:40,000
Like Meal not found.

33
00:01:40,000 --> 00:01:42,000
And then maybe say, "Maybe we could not find

34
00:01:42,000 --> 00:01:47,000
the requested page or meal data," something like this.

35
00:01:49,000 --> 00:01:51,000
And with that, if you now reload,

36
00:01:51,000 --> 00:01:54,000
you see that we get this not found page content here,

37
00:01:54,000 --> 00:01:58,000
this meal-specific not-found page content.

38
00:01:58,000 --> 00:02:01,000
And that's, of course, arguably a better user experience.