Now, since we're already talking
about errors, there's another kind of error
that could occur.
What happens if a user enters an invalid URL?
Something like my-meals,
which is a path we're not supporting here.
In that case, we get this default 404 page
with which you might be happy, of course,
no need to change it.
But if you want to, you can change it.
And to do that, you can add a not-found.js file, like this.
And again, you can add that anywhere in your app folder
and it'll automatically cover any sibling and nested pages.
So if I add it here on the root level,
we can simply catch all not-found errors
that might be generated from anywhere in this application.
If you would want to be more granular
and maybe show more granular error messages,
you could nest it into some other folder.
Now, here, I will go with that global level.
And then, again export a function here,
which I'll name NotFound.
And then here, I'll simply return a main element
with a class name of not-found,
which is another CSS class I prepared
in that globals.css file.
And I'll then add a title of Not found.
And I'll, below that, output a text,
where I'll say, "Unfortunately, we could not find
the requested page or resource."
Like this.
And with that edit, you'll see that now, for invalid pages,
we see our custom Not Found page here.
But with that, I'll now go back to my meals
because, as a next step, I want to make sure
that we cannot just see all meals,
but that we can also browse the meal details.