Now, it is possible
that a user tries to look for a meal that doesn't exist,
like great bolo.
And in that case, I get this "An error occurred" page.
Now, I'm getting this error-occurred page
because I'm trying to access the instructions on undefined
because I wasn't able to load a meal.
So it's good that we get some fallback page,
but it's not actually an error that occurred,
if we look at it from a technical perspective,
instead, we simply did not find the requested meal.
So a better way of handling this
would be to go here and check if not meal.
So if meal is undefined, if we didn't find a meal.
And then show the closest not-found page
available in this project.
And that can indeed be triggered
by calling a special function that's provided by NextJS,
the notFound function,
which is imported from next/navigation.
Calling this function
will stop this component from executing
and will show the closest not-found or error page.
So if we have an error page that's closer,
as it's the case here, than the closest not-found page,
it will still show that.
But we can work around that
by also adding a not-found tray as fall here
instead of the meals folder.
And then we can also set up some
meal-specific not-found message.
Like Meal not found.
And then maybe say, "Maybe we could not find
the requested page or meal data," something like this.
And with that, if you now reload,
you see that we get this not found page content here,
this meal-specific not-found page content.
And that's, of course, arguably a better user experience.