All language subtitles for 018 Fallback Pages & _Not Found_ Pages_Downloadly.ir_en

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.