Now besides improving the markup
and styling, there's one other thing we might want to do
with this basic application.
We might handle situations where visitors,
users of this website try to visit pages
or request news articles that don't exist.
And we can do that by adding another special file
to this project, the not-found.js file.
And this is a file that allows you to set up
some not found page,
some content that will be shown on the screen
if some page or resource is not found.
And you can add such a not-found.js file
anywhere in your app folder, including in nested folders
to have a route specific not found fallback,
but here I'm setting it up at the root level
of the app folder so that I catch any not found errors
thrown from anywhere in this application or this website.
Now in this not-found.js file,
we should then export a component function,
the NotFoundPage component function, for example,
and it's then up to you which kind
of fallback content you wanna show here.
Here I'll return a div with an id of error,
which will simply make sure that it's stalled appropriately.
And I'll add a h1 tag where I'll say Not Found.
And below that maybe a paragraph where we could say,
the requested resource could not be found.
Something like that.
With that, if you save that file,
if you try to enter some page that doesn't exist like /abc,
you'll see that not found content.
Now that's some general not found content,
a general not found page that will be shown
whenever a not found error occurs anywhere on this website.
We could also copy this file
and set up a more specific not-found.js file
for a nested path.
For example, here in this news slug folder,
this would allow us to set up some fallback content
that should be shown if an article isn't found,
if a news item isn't found.
Therefore, in that nested not-found.js file,
I'll rename this function to NewsNotFound.
Though of course this name doesn't matter.
And I'll keep the structure, but I'll change the text
or I'll change the text in this paragraph to be precise.
And I'll say, unfortunately,
we could not find the requested article.
Something like this.
Now the idea is that if we now try to visit an article
that does not exist, like /news/abc,
we get this custom fallback,
but as you see, that's not happening here.
Instead, I get some runtime error.
And we're getting that
because of course NextJS doesn't really understand
whether an article exists or not.
In this slug page.js file, we simply try
to find an article for the provided slug.
So for the slug that was in the URL,
and well, if that yields undefined here,
we'll simply run into some errors,
but we won't technically generate a not found error.
To do that, we should add an extra if check here
and check if not newsItem, so if that is undefined,
and in that case you can call a function
that's provided by NextJS, the notFound function
that should be imported from next/navigation.
When you call this function,
you'll trigger such a not found error,
and NextJS will then handle that
by showing the closest not found fallback content.
So with that, if you save this,
if you now reload for /news/abc,
you see you are getting this news article fallback
and that's now the behavior we want.
And with that, we're now also handling these situations.