So now that we understand
this concept of having a fallback
and of generating certain pages for certain IDs,
let's take another look at the not found case
that we're trying to request a page which doesn't exist.
And let's start by simply visiting a page
with a product ID of P4.
Now we get a 404 error page here.
So a not found page because in our data
we only have the IDs P1, P2 and P3.
There is no product with an ID of P4.
Now we get this not found error
because in getStaticPaths,
we load and build our array of IDs
our array of routes or of parameters
for which pages should be generated
from that dummy-backend.json file.
So paths with params here in the end is an array
where we only configure param pairs
So pid value pairs for the values P1, P2, P3
since these are the only IDs that exist
in that dummy-backend.json file.
And automatically if we then try to load this page
for an ID which was not pre-generated,
we do get this 404 error.
Now that makes sense.
What if we use fallback true though?
What if we for example assume that the products
stored in dummy-backend.json might not be all the products
for which we are able to fetch data.
So we only generate pages for the three product IDs
we find in that file, because we go through that file here
in getStaticPaths
but by setting fallback to true,
we then also tell Next.js
that even if an ID value is not found here
we still might be able to render a page.
That's what the idea behind fallback is
that we don't have to predefine all possible pages,
all possible values for the dynamic segment.
So therefore, now if I set fallback to true here
we will see that if I visit p4
I get this error that
we cannot read the property title of undefined.
Now we saw that before in the course already
we get this because we need
to have this fallback scenario here
that we're still waiting for a product
because when we set fallback to true and not to blocking
then Next.js will instantly return a page
which does not yet have the data.
And it will load the data in the background
and give it to us on the page and re render the page
once the data is there.
So we need to render this fallback for the time
we're waiting for the product to load.
But if I now do that and I reload, you see
we see loading here,
but then after a while we get another error
failed to load static props.
And this hopefully also makes sense.
I'm trying to load this product page for an ID of P4
for which we just don't have any data
because in getStaticProps
we are also reaching out to dummy-backend.json
and we're trying to find our product by ID in that file.
And we won't find a product with ID P4 in that file.
So we see loading initially as a fallback,
but then Next.js tries to load the actual data
for this page and it just fails there
because we don't have such a product.
So that's why we get this error eventually here then
because it failed to load the actual data.
Now that is a perfect example
for setting the not found property on the object
we return in getStaticProps.
Here when we try to get our product,
we also wanna check if we don't have a product
and if we don't have a product.
So if we failed to find a product for the given ID,
then we want to return an object
where not found is set to true.
By setting this, we are able to use fallback true
and try to find a product for a parameter value
which was not predefined here
because maybe we do have that maybe dummy-backend.json
is a more dynamic data source
which could yield that product.
But if we then still fail to fetch it
we don't want to return to regular page
with the missing data, which causes an error.
But we then wanna show the not found
the 404 error page instead.
So with that if we save this
now you see for P4 I get loading and then the 404 page.
And for P3 on the other hand it still works as before.
So that's how we can then utilize
the not found property here
in getStaticProps together with fallback true.
And of course, it's up to you
which combination makes the most sense
for your exact scenario and use case.
This is just one example
and one other idea of using Next.js and its features.