1 00:00:02,000 --> 00:00:05,000 Now before we explore more static functions 2 00:00:05,000 --> 00:00:07,000 next.js offers to us. 3 00:00:07,000 --> 00:00:09,000 And when we need them, 4 00:00:09,000 --> 00:00:12,000 let's take another closer look at getStaticProps. 5 00:00:12,000 --> 00:00:16,000 On this slide you see that I added a parameter 6 00:00:16,000 --> 00:00:18,000 called context there. 7 00:00:18,000 --> 00:00:21,000 Because indeed this function 8 00:00:21,000 --> 00:00:25,000 which is called by next.js receives an argument. 9 00:00:25,000 --> 00:00:28,000 We just haven't used it this far. 10 00:00:28,000 --> 00:00:32,000 But we do actually get an object here as our argument, 11 00:00:32,000 --> 00:00:37,000 as a parameter with some extra information about this page 12 00:00:38,000 --> 00:00:41,000 when it's executed by next.js. 13 00:00:41,000 --> 00:00:45,000 And for example, we would get any dynamic params, 14 00:00:45,000 --> 00:00:48,000 any dynamic path segment values 15 00:00:48,000 --> 00:00:49,000 which we'll see in a second. 16 00:00:49,000 --> 00:00:50,000 So we'll ignore that for now. 17 00:00:50,000 --> 00:00:54,000 And we also get a couple of other pieces of information 18 00:00:54,000 --> 00:00:57,000 which at the moment though, don't matter to us. 19 00:00:57,000 --> 00:00:59,000 So let's ignore this for now. 20 00:00:59,000 --> 00:01:01,000 You will see context in action 21 00:01:01,000 --> 00:01:04,000 throughout the next lectures though. 22 00:01:04,000 --> 00:01:05,000 Instead, let's take a closer look 23 00:01:05,000 --> 00:01:08,000 at this return object again. 24 00:01:08,000 --> 00:01:11,000 In there we see props and revalidate. 25 00:01:11,000 --> 00:01:14,000 Now there are two other keys, 26 00:01:14,000 --> 00:01:16,000 which you can set on this object. 27 00:01:16,000 --> 00:01:21,000 One key is the not found key, 28 00:01:21,000 --> 00:01:23,000 which wants a Boolean value 29 00:01:23,000 --> 00:01:25,000 which is either true or false. 30 00:01:26,000 --> 00:01:27,000 If you set this to true, 31 00:01:27,000 --> 00:01:31,000 this page will return a four O four error 32 00:01:31,000 --> 00:01:34,000 and therefore render the four O four error page 33 00:01:34,000 --> 00:01:37,000 instead of the normal page. 34 00:01:37,000 --> 00:01:40,000 So if I add not found true here and save this, 35 00:01:40,000 --> 00:01:43,000 if we reload we get the four O four page. 36 00:01:44,000 --> 00:01:46,000 Now, why might we want to do that? 37 00:01:46,000 --> 00:01:50,000 Well, if the code here where you fetch data 38 00:01:50,000 --> 00:01:54,000 fails to fetch the data for whatever reason, 39 00:01:54,000 --> 00:01:56,000 then you could for example, do that. 40 00:01:56,000 --> 00:02:00,000 So we could check if data products, length, 41 00:02:00,000 --> 00:02:01,000 if that is zero. 42 00:02:01,000 --> 00:02:04,000 So if we have no products, 43 00:02:04,000 --> 00:02:07,000 then maybe we want to return an object here 44 00:02:07,000 --> 00:02:11,000 in get static props, which has not found set to true. 45 00:02:11,000 --> 00:02:14,000 So that we show the not found page 46 00:02:14,000 --> 00:02:16,000 and only if we have at least one product 47 00:02:16,000 --> 00:02:21,000 in the fetched data, we return the regular page. 48 00:02:21,000 --> 00:02:23,000 That would be a typical use case 49 00:02:23,000 --> 00:02:27,000 where you sometimes want to render the four O four page 50 00:02:27,000 --> 00:02:30,000 because you failed to fetch data. 51 00:02:30,000 --> 00:02:32,000 So if I save this and reload. 52 00:02:32,000 --> 00:02:34,000 Now I see that page again, 53 00:02:34,000 --> 00:02:36,000 because of course we do have products. 54 00:02:37,000 --> 00:02:41,000 Another key you can set is the redirect key. 55 00:02:42,000 --> 00:02:47,000 The redirect key allows you to redirect the user. 56 00:02:47,000 --> 00:02:50,000 So instead of rendering the page content, 57 00:02:50,000 --> 00:02:53,000 instead of rendering this component content 58 00:02:53,000 --> 00:02:57,000 you can redirect to another page, to another route. 59 00:02:57,000 --> 00:02:58,000 And that could also be needed 60 00:02:58,000 --> 00:03:02,000 because maybe you failed to fetch data. 61 00:03:02,000 --> 00:03:05,000 Let's say the problem is not that there is no data 62 00:03:05,000 --> 00:03:09,000 but instead you weren't able to access the database 63 00:03:09,000 --> 00:03:11,000 or anything like that. 64 00:03:11,000 --> 00:03:14,000 So if there is no data to begin with 65 00:03:14,000 --> 00:03:18,000 so not just no products, but no data in general 66 00:03:18,000 --> 00:03:21,000 then maybe you want to redirect. 67 00:03:21,000 --> 00:03:23,000 Then you can do this by returning an object 68 00:03:23,000 --> 00:03:26,000 where the redirect key is set to an object, 69 00:03:26,000 --> 00:03:30,000 where you then set a destination to some route. 70 00:03:30,000 --> 00:03:34,000 For example, to the no data route, which we don't have here, 71 00:03:34,000 --> 00:03:37,000 but which you could have in a project of yours, of course. 72 00:03:37,000 --> 00:03:41,000 And where then they have where that route would be loaded 73 00:03:41,000 --> 00:03:45,000 with a redirect status code returned by next.js 74 00:03:45,000 --> 00:03:49,000 instead of this page component. 75 00:03:49,000 --> 00:03:51,000 Now we don't need either of the two here, 76 00:03:51,000 --> 00:03:53,000 but I wanted to mention them here 77 00:03:53,000 --> 00:03:57,000 so that you are aware of these special options, 78 00:03:57,000 --> 00:04:00,000 which basically can come in handy. 79 00:04:00,000 --> 00:04:04,000 If something goes wrong with fetching your data. 80 00:04:04,000 --> 00:04:07,000 And with that, that's enough for a getStaticProps 81 00:04:07,000 --> 00:04:09,000 for this very moment. 82 00:04:09,000 --> 00:04:12,000 Let's now have a look at another very important use case 83 00:04:12,000 --> 00:04:14,000 and very important problem 84 00:04:14,000 --> 00:04:17,000 you often face in next.js projects.