Original subtitles

Now before we explore more static functions

next.js offers to us.

And when we need them,

let's take another closer look at getStaticProps.

On this slide you see that I added a parameter

called context there.

Because indeed this function

which is called by next.js receives an argument.

We just haven't used it this far.

But we do actually get an object here as our argument,

as a parameter with some extra information about this page

when it's executed by next.js.

And for example, we would get any dynamic params,

any dynamic path segment values

which we'll see in a second.

So we'll ignore that for now.

And we also get a couple of other pieces of information

which at the moment though, don't matter to us.

So let's ignore this for now.

You will see context in action

throughout the next lectures though.

Instead, let's take a closer look

at this return object again.

In there we see props and revalidate.

Now there are two other keys,

which you can set on this object.

One key is the not found key,

which wants a Boolean value

which is either true or false.

If you set this to true,

this page will return a four O four error

and therefore render the four O four error page

instead of the normal page.

So if I add not found true here and save this,

if we reload we get the four O four page.

Now, why might we want to do that?

Well, if the code here where you fetch data

fails to fetch the data for whatever reason,

then you could for example, do that.

So we could check if data products, length,

if that is zero.

So if we have no products,

then maybe we want to return an object here

in get static props, which has not found set to true.

So that we show the not found page

and only if we have at least one product

in the fetched data, we return the regular page.

That would be a typical use case

where you sometimes want to render the four O four page

because you failed to fetch data.

So if I save this and reload.

Now I see that page again,

because of course we do have products.

Another key you can set is the redirect key.

The redirect key allows you to redirect the user.

So instead of rendering the page content,

instead of rendering this component content

you can redirect to another page, to another route.

And that could also be needed

because maybe you failed to fetch data.

Let's say the problem is not that there is no data

but instead you weren't able to access the database

or anything like that.

So if there is no data to begin with

so not just no products, but no data in general

then maybe you want to redirect.

Then you can do this by returning an object

where the redirect key is set to an object,

where you then set a destination to some route.

For example, to the no data route, which we don't have here,

but which you could have in a project of yours, of course.

And where then they have where that route would be loaded

with a redirect status code returned by next.js

instead of this page component.

Now we don't need either of the two here,

but I wanted to mention them here

so that you are aware of these special options,

which basically can come in handy.

If something goes wrong with fetching your data.

And with that, that's enough for a getStaticProps

for this very moment.

Let's now have a look at another very important use case

and very important problem

you often face in next.js projects.