1 00:00:03,000 --> 00:00:05,258 We've seen how to load some data 2 00:00:05,258 --> 00:00:06,458 from a local file 3 00:00:06,458 --> 00:00:08,646 in our getStaticProps function. 4 00:00:08,646 --> 00:00:11,186 Now I'd like to do some refactoring, 5 00:00:11,186 --> 00:00:13,233 and extract that bit of logic 6 00:00:13,233 --> 00:00:15,280 into its own separate module, 7 00:00:16,132 --> 00:00:18,685 to follow the "separation of concerns" 8 00:00:18,685 --> 00:00:19,826 design principle. 9 00:00:20,393 --> 00:00:23,226 Let's start by creating a separate function 10 00:00:23,226 --> 00:00:24,347 inside this file. 11 00:00:24,347 --> 00:00:25,928 Let's call it "getPost". 12 00:00:27,159 --> 00:00:28,607 And this function will 13 00:00:28,607 --> 00:00:29,858 read the post data, 14 00:00:29,858 --> 00:00:32,359 so we can just copy our existing code. 15 00:00:32,990 --> 00:00:35,336 Except that here we can return 16 00:00:35,336 --> 00:00:37,291 the post object directly. 17 00:00:37,869 --> 00:00:41,012 So now we can call this "getPost" function 18 00:00:41,012 --> 00:00:42,808 inside "getStaticProps", 19 00:00:43,402 --> 00:00:45,281 and get the post object 20 00:00:45,281 --> 00:00:49,039 by awaiting the Promise returned by "getPost". 21 00:00:49,620 --> 00:00:51,094 We're doing a refactoring 22 00:00:51,094 --> 00:00:52,921 so the functionality of our app 23 00:00:52,921 --> 00:00:54,159 should stay the same, 24 00:00:54,159 --> 00:00:55,928 but it's always good to check. 25 00:00:56,604 --> 00:00:58,972 Now, at the moment we're always loading 26 00:00:58,972 --> 00:01:00,004 the "first-post", 27 00:01:00,564 --> 00:01:03,125 but we can make our "getPost" function 28 00:01:03,125 --> 00:01:04,674 more general by passing 29 00:01:04,674 --> 00:01:06,965 which post to load as an argument. 30 00:01:07,599 --> 00:01:09,422 And then accept it as a parameter here, 31 00:01:09,922 --> 00:01:11,548 that I'll call "slug", 32 00:01:11,548 --> 00:01:13,543 meaning the part of the URL 33 00:01:13,543 --> 00:01:15,908 that identifies a specific post. 34 00:01:16,555 --> 00:01:18,211 Now we change this string 35 00:01:18,211 --> 00:01:19,800 to be backtick-delimited 36 00:01:20,366 --> 00:01:22,463 so that we can insert the "slug" 37 00:01:22,463 --> 00:01:23,577 as a placeholder. 38 00:01:24,142 --> 00:01:25,581 And let's quickly check that 39 00:01:25,581 --> 00:01:26,866 we didn't break anything. 40 00:01:27,417 --> 00:01:28,368 It's all good. 41 00:01:28,368 --> 00:01:29,929 What I'd like to do now 42 00:01:29,929 --> 00:01:31,557 is to move that function 43 00:01:31,557 --> 00:01:32,983 to a separate module, 44 00:01:32,983 --> 00:01:35,222 because this file is really about 45 00:01:35,222 --> 00:01:36,376 rendering a page. 46 00:01:37,215 --> 00:01:40,101 So the details of how to get the data 47 00:01:40,101 --> 00:01:42,285 don't really belong in here. 48 00:01:42,862 --> 00:01:45,123 A common approach in Next.js apps 49 00:01:45,123 --> 00:01:46,836 is to have a "lib" folder 50 00:01:46,836 --> 00:01:48,959 at the top-level of the project 51 00:01:49,596 --> 00:01:51,328 that contains any code 52 00:01:51,328 --> 00:01:53,531 that's not specific to pages 53 00:01:53,531 --> 00:01:55,656 or other visual components. 54 00:01:56,313 --> 00:01:58,231 So here we could create a module 55 00:01:58,231 --> 00:01:59,130 called "posts", 56 00:01:59,689 --> 00:02:01,801 since it will contain functions 57 00:02:01,801 --> 00:02:03,231 to get the post data. 58 00:02:03,799 --> 00:02:06,003 And we can simply move the function 59 00:02:06,003 --> 00:02:08,584 we just wrote from the "first-post" page. 60 00:02:09,664 --> 00:02:11,810 We just need to make sure to "export" it 61 00:02:11,810 --> 00:02:12,722 from this module, 62 00:02:13,765 --> 00:02:15,559 so we can then go and import it 63 00:02:15,559 --> 00:02:16,601 in the other file, 64 00:02:18,498 --> 00:02:20,730 and I'll use the auto-import feature, 65 00:02:20,730 --> 00:02:23,686 so the editor automatically finds the right path. 66 00:02:24,246 --> 00:02:25,256 Let's save and, 67 00:02:25,256 --> 00:02:26,670 we have an error now. 68 00:02:26,670 --> 00:02:29,094 That's why it's good to test the app 69 00:02:29,094 --> 00:02:30,374 after every change, 70 00:02:30,374 --> 00:02:33,134 so if anything breaks it's easier to fix. 71 00:02:33,903 --> 00:02:36,427 In this case I simply forgot to move 72 00:02:36,427 --> 00:02:37,899 the "readFile" import 73 00:02:37,899 --> 00:02:39,862 into the new "posts" module, 74 00:02:39,862 --> 00:02:41,614 where it's actually used. 75 00:02:42,324 --> 00:02:44,096 If I save both files now, 76 00:02:45,524 --> 00:02:46,845 that error should go away. 77 00:02:48,224 --> 00:02:49,910 Ok, it's working again, 78 00:02:49,910 --> 00:02:52,109 and that's all the refactoring 79 00:02:52,109 --> 00:02:53,209 I wanted to do. 80 00:02:53,855 --> 00:02:56,002 Note how this way in this file 81 00:02:56,002 --> 00:02:57,433 to get the post data 82 00:02:57,433 --> 00:03:00,152 we simply call the "getPost" function, 83 00:03:00,152 --> 00:03:01,798 there's nothing in here 84 00:03:01,798 --> 00:03:03,730 about how to get that data. 85 00:03:04,516 --> 00:03:06,188 And that's a good thing, 86 00:03:06,188 --> 00:03:07,581 because in this page 87 00:03:07,581 --> 00:03:10,437 we're only interested in getting the data 88 00:03:10,437 --> 00:03:11,900 so we can display it. 89 00:03:11,900 --> 00:03:13,781 The fact that the post data 90 00:03:13,781 --> 00:03:15,383 comes from a local file 91 00:03:15,383 --> 00:03:16,985 is irrelevant as far as 92 00:03:16,985 --> 00:03:19,284 displaying the page is concerned. 93 00:03:20,271 --> 00:03:22,277 That's why it's good practice 94 00:03:22,277 --> 00:03:24,559 to encapsulate that sort of logic 95 00:03:24,559 --> 00:03:27,257 in a separate layer of our application, 96 00:03:27,257 --> 00:03:29,608 that deals with fetching the data.