1 00:00:02,000 --> 00:00:04,000 So we added get static props 2 00:00:04,000 --> 00:00:06,000 with some dummy code, 3 00:00:06,000 --> 00:00:09,000 but at the moment we're really just, 4 00:00:09,000 --> 00:00:11,000 not doing anything that would require 5 00:00:11,000 --> 00:00:14,000 us to add that function. 6 00:00:14,000 --> 00:00:16,000 We could just prepare dummy data like this 7 00:00:16,000 --> 00:00:19,000 in the component function as well. 8 00:00:19,000 --> 00:00:22,000 Well, of course I started with such a simple example to 9 00:00:22,000 --> 00:00:25,000 just get started with get static props. 10 00:00:25,000 --> 00:00:30,000 A more realistic example would be that we have a data file 11 00:00:30,000 --> 00:00:32,000 like this dummy backend Json file 12 00:00:32,000 --> 00:00:34,000 from which we wanna load data. 13 00:00:35,000 --> 00:00:39,000 But we do wanna load the data when the page is prepared. 14 00:00:39,000 --> 00:00:41,000 We don't wanna reach out 15 00:00:41,000 --> 00:00:44,000 to that file through a HTTP request 16 00:00:44,000 --> 00:00:47,000 or anything like that from the client site. 17 00:00:47,000 --> 00:00:51,000 And therefore will now utilize the fact that any code inside 18 00:00:51,000 --> 00:00:56,000 of get static props is executed on the server site so to say 19 00:00:56,000 --> 00:00:59,000 with server site capabilities. 20 00:00:59,000 --> 00:01:02,000 And that means that we can now, for example, 21 00:01:02,000 --> 00:01:04,000 work with the file system. 22 00:01:04,000 --> 00:01:06,000 For this I'll add import at the top 23 00:01:06,000 --> 00:01:10,000 and I'll import Fs from Fs. 24 00:01:10,000 --> 00:01:14,000 Now this imports the file system module from node JS. 25 00:01:16,000 --> 00:01:18,000 This is not a third party package 26 00:01:18,000 --> 00:01:19,000 which we needed to install. 27 00:01:19,000 --> 00:01:23,000 It's one of the core node JS modules instead. 28 00:01:23,000 --> 00:01:26,000 And working with the Fs module, 29 00:01:26,000 --> 00:01:30,000 would fail if you try to do it on the client site, 30 00:01:30,000 --> 00:01:33,000 because browser site Java script 31 00:01:33,000 --> 00:01:35,000 can't access the file system. 32 00:01:35,000 --> 00:01:38,000 And especially not our project file system here 33 00:01:38,000 --> 00:01:43,000 because the entire project is not served to our visitors. 34 00:01:43,000 --> 00:01:45,000 But we can import this year nonetheless 35 00:01:45,000 --> 00:01:49,000 and use the file system module inside of get static prompts. 36 00:01:51,000 --> 00:01:53,000 So we can use Fs here. 37 00:01:53,000 --> 00:01:56,000 And next JS is very clever 38 00:01:56,000 --> 00:02:01,000 and sees which imports you only use in get static props 39 00:02:01,000 --> 00:02:04,000 or similar functions, which we'll learn about later. 40 00:02:04,000 --> 00:02:09,000 And then those imports are basically stripped out 41 00:02:09,000 --> 00:02:12,000 of the client site code bundle. 42 00:02:12,000 --> 00:02:14,000 So when the code for the client site, 43 00:02:14,000 --> 00:02:16,000 the react app code for the browser site, 44 00:02:16,000 --> 00:02:21,000 when that is prepared, that import will not be part of it. 45 00:02:21,000 --> 00:02:24,000 Next JS will ignore it for the client site, 46 00:02:24,000 --> 00:02:27,000 it will split your code in a clever way. 47 00:02:27,000 --> 00:02:30,000 So to component code in general will be part 48 00:02:30,000 --> 00:02:34,000 of the client site code, this import and this code won't be. 49 00:02:36,000 --> 00:02:40,000 And now we can use Fs to get access to this 50 00:02:40,000 --> 00:02:44,000 dummy backend json file with the read file 51 00:02:44,000 --> 00:02:47,000 or to read file sync function, 52 00:02:47,000 --> 00:02:50,000 read file sync synchronously reads the file 53 00:02:50,000 --> 00:02:54,000 and blocks the execution until it's done. 54 00:02:54,000 --> 00:02:58,000 Read file on the other end wants a call back to continue. 55 00:02:58,000 --> 00:03:00,000 And we can actually also import 56 00:03:00,000 --> 00:03:04,000 the file system from Fs/promises, 57 00:03:04,000 --> 00:03:07,000 which is a special version of this note JS module 58 00:03:07,000 --> 00:03:08,000 that uses promises. 59 00:03:08,000 --> 00:03:13,000 And when we do so read file actually returns a promise. 60 00:03:13,000 --> 00:03:15,000 And since this is an async function 61 00:03:15,000 --> 00:03:17,000 we can then just a wait this. 62 00:03:18,000 --> 00:03:20,000 Now read file just needs a path 63 00:03:20,000 --> 00:03:22,000 to the file which you wanna read. 64 00:03:22,000 --> 00:03:26,000 So we can construct this path here and this path 65 00:03:26,000 --> 00:03:28,000 or let's name it file path, 66 00:03:28,000 --> 00:03:32,000 this path should lead to the dummy backend Json file. 67 00:03:32,000 --> 00:03:37,000 Now to construct this path, we can import another module 68 00:03:38,000 --> 00:03:42,000 from node JS the path module from path. 69 00:03:42,000 --> 00:03:45,000 And that's a module with helpful 70 00:03:45,000 --> 00:03:48,000 functionalities for building paths. 71 00:03:49,000 --> 00:03:52,000 Now, here we can use path and execute to join method 72 00:03:52,000 --> 00:03:57,000 to build a path that can be consumed by read file. 73 00:03:57,000 --> 00:04:00,000 And here I wanna start from 74 00:04:00,000 --> 00:04:04,000 inside the current directory and then basically work my way 75 00:04:04,000 --> 00:04:09,000 to this data directory and the dummy backend Json files. 76 00:04:09,000 --> 00:04:12,000 Now for this, we basically wanna dive into the data folder 77 00:04:12,000 --> 00:04:17,000 and then grab this dummy backend Json file. 78 00:04:17,000 --> 00:04:21,000 And to do this, we, first of all needs to tell path join 79 00:04:21,000 --> 00:04:23,000 in which path we're starting 80 00:04:23,000 --> 00:04:26,000 and we can get to current working directory 81 00:04:26,000 --> 00:04:31,000 by using another node JS object or concept. 82 00:04:31,000 --> 00:04:34,000 And that's the process object 83 00:04:34,000 --> 00:04:38,000 which is globally available in node JS. 84 00:04:38,000 --> 00:04:42,000 And then on process, we can execute the CWD method 85 00:04:42,000 --> 00:04:45,000 which stands for current working directory. 86 00:04:45,000 --> 00:04:48,000 And this gives you the current working directory 87 00:04:48,000 --> 00:04:51,000 off this code file when it's executed. 88 00:04:51,000 --> 00:04:54,000 Now, the important thing here is that this current 89 00:04:54,000 --> 00:04:57,000 working directory will not be the pages folder. 90 00:04:57,000 --> 00:04:59,000 Instead when this file is executed, 91 00:04:59,000 --> 00:05:02,000 next JS will be executing it, 92 00:05:02,000 --> 00:05:06,000 and it will basically treat all the files as if they sit 93 00:05:06,000 --> 00:05:09,000 in our root project folder. 94 00:05:09,000 --> 00:05:10,000 So the current working directory 95 00:05:10,000 --> 00:05:13,000 will be the overall project folder 96 00:05:13,000 --> 00:05:14,000 instead of the pages folder. 97 00:05:14,000 --> 00:05:16,000 That's important to know. 98 00:05:16,000 --> 00:05:19,000 So with that, we tell node JS 99 00:05:19,000 --> 00:05:22,000 or the path joined methods to be precise, 100 00:05:22,000 --> 00:05:27,000 that we start in this overall project directory. 101 00:05:27,000 --> 00:05:28,000 Then we add a comma. 102 00:05:28,000 --> 00:05:30,000 And the next argument is data 103 00:05:30,000 --> 00:05:33,000 because we wanna dive into the data folder. 104 00:05:33,000 --> 00:05:36,000 We wanna build a path which starts 105 00:05:36,000 --> 00:05:38,000 at the current working directory. 106 00:05:38,000 --> 00:05:40,000 So to project directory and then dives 107 00:05:40,000 --> 00:05:42,000 into the data directory. 108 00:05:42,000 --> 00:05:44,000 And then we add another argument. 109 00:05:44,000 --> 00:05:47,000 We can add an infinite amount of arguments here, 110 00:05:47,000 --> 00:05:50,000 which holds the file name we wanna use. 111 00:05:50,000 --> 00:05:53,000 So in this case, dummybackend.Json 112 00:05:54,000 --> 00:05:58,000 This now builds an absolute path to this file, 113 00:05:58,000 --> 00:06:02,000 and that's now the path which we pass to read file. 114 00:06:02,000 --> 00:06:04,000 So this will now read this file. 115 00:06:05,000 --> 00:06:10,000 So with that, we get our Json data from that Json file 116 00:06:10,000 --> 00:06:12,000 and now to get our actual data 117 00:06:12,000 --> 00:06:16,000 we can call Json pars on the Json data. 118 00:06:16,000 --> 00:06:20,000 Json is a globally available object just 119 00:06:20,000 --> 00:06:21,000 as it is on the browser site 120 00:06:21,000 --> 00:06:24,000 you can use it in node JS as well 121 00:06:24,000 --> 00:06:26,000 and this (indistinct) Json data 122 00:06:26,000 --> 00:06:29,000 it converts it into a regular JavaScript object. 123 00:06:30,000 --> 00:06:34,000 And now that data will be an object with a product key, 124 00:06:34,000 --> 00:06:35,000 which holds an array. 125 00:06:37,000 --> 00:06:39,000 So now we can return our props, 126 00:06:39,000 --> 00:06:41,000 which are now based on that data 127 00:06:41,000 --> 00:06:44,000 and the products, which are part of my props 128 00:06:44,000 --> 00:06:47,000 are now data.products. 129 00:06:47,000 --> 00:06:51,000 So the products I fetched from this file are now passed 130 00:06:51,000 --> 00:06:54,000 as a value to products here in this object 131 00:06:54,000 --> 00:06:57,000 and our data for all ultimately passed (indistinct) 132 00:06:57,000 --> 00:06:59,000 props to dis component function 133 00:06:59,000 --> 00:07:03,000 when next JS executes disfunction for us. 134 00:07:03,000 --> 00:07:07,000 But it will first of all, go through that function. 135 00:07:07,000 --> 00:07:09,000 And hence, now if we save everything 136 00:07:09,000 --> 00:07:12,000 and you reload local hosts free thousand, 137 00:07:12,000 --> 00:07:15,000 you'll see free products here. 138 00:07:15,000 --> 00:07:18,000 Again, if you viewed a page source, 139 00:07:18,000 --> 00:07:21,000 you see that all the data is there right from the start. 140 00:07:21,000 --> 00:07:22,000 Here it is, 141 00:07:22,000 --> 00:07:24,000 so it was pre rendered 142 00:07:24,000 --> 00:07:28,000 And was pre-rendered with help of get static props 143 00:07:28,000 --> 00:07:31,000 which now executes a bunch of server site code 144 00:07:31,000 --> 00:07:34,000 that never reaches the client. 145 00:07:34,000 --> 00:07:39,000 It's only executed when next JS pre renders our page.